Question

我来自flash动画背景，我正在学习使用HTML5 <canvas>和纯JavaScript创建动画。

在Flash中，您可以绘制movieclip并将其链接到actionScript类文件。这使得每个动画片段有点OO /模块化，并允许您在应用程序中更轻松地调用和引用它们。

由于JS没有本机类支持，并且使用Canvas绘图似乎比在Flash中更基础，为大型/复杂画布动画构建javascript的方法的示例？

Answer 1

您可以通过使用对象来使用伪类方法。

例如，如果您想让我们在画布上移动一个框，您可以将框定义为对象并为每个框架更新它：

Live demo

function ooRect(x, y, w, h, color, dx, dy) {
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
    this.color = color;
    this.dx = dx;
    this.dy = dy;
}

现在ooRect是一个可以更新的对象，可以移动并改变颜色等。

您可以使用方法对其进行扩展，使其以自包含更新方式进行扩展，以便每帧更新自身：

function ooRect(x, y, w, h, color, dx, dy) {
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
    this.color = color;
    this.dx = dx;
    this.dy = dy;

    this.update = function(ctx) {
        this.x += this.dx;
        this.y += this.dy;
        ctx.fillStyle = this.color;
        ctx.fillRect(this.x, this.y, this.w, this.h);
    }
}

你现在可以拥有一个＆＃34;主持人＆＃34;例程（或另一个特殊对象）更新存储在数组中的所有对象：

var objects = [
        new ooRect(10, 20, 50, 70, 'blue', 2, 3),
        new ooRect(200, 300, 50, 70, 'red', -3, 2) /// etc.
    ];

(function loop() {
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);  /// clear canvas

    for(var i = 0, o; o = objects[i++];)           /// update all objects
        o.update(ctx);

    requestAnimationFrame(loop);                   /// next frame
})();

现在要实现不同类型的形状对象及其属性和方法。

如果您打算使用大量对象，可以将它们原型化为允许浏览器共享代码库内存的原型：

function ooRect(x, y, w, h, color, dx, dy) {
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
    this.color = color;
    this.dx = dx;
    this.dy = dy;

}
ooRect.prototype.update = function(ctx) {
    this.x += this.dx;
    this.y += this.dy;
    ctx.fillStyle = this.color;
    ctx.fillRect(this.x, this.y, this.w, this.h);
}

Answer 2

使用 requirejs ，这是JavaScript文件和模块加载器。 http://requirejs.org/

如何使用canvas / JavaScript制作模块化，oo“动画”？

2 个答案:

Live demo