HTML5 Canvas：如何枚举所有对象

Question

我怎么能/可以枚举已添加到canvas元素的所有对象，并迭代它们？

顺便说一下 - jCanvas可用。

Answer 1

在画布中，你正在画一张纸，你没有元素。 如果你需要能够操作的元素，那么使用svg。

Answer 2

如果你正在使用jCanvas，你可以将每个元素添加到不同的层，使用getLayers方法检索它们（请参阅文档 ），并迭代它返回的数组：

getLayers（）方法返回包含每个图层对象的数组。 因此，您可以在检索后对阵列执行操作。

为了实现更精细的控制，我建议您查看一个画布库，例如easel.js ，它为您提供了一个类似于Flash中的全功能显示列表。

Answer 3

Canvas只是一个位图，不使用对象 - 仅在光栅化已定义的形状后使用像素。

但是，您可以创建自己的对象来表示绘制到画布的内容，并将这些对象存储在数组中。 这样，您可以迭代，更改和重新绘制画布对象（如果需要，甚至可以将它们导出为SVG，PDF，XML，JSON等）。

对象可以像下面这样简单：

function Rect(x, y, w, h) {
    this.x = x;
    this.y = y;
    this.width = w;
    this.height = h;

    // example render
    this.render = function(ctx) {
        ctx.beginPath();
        ctx.rect(this.x, this.y, this.width, this.height);
        ctx.stroke();
    }
}

然后分配它：

var shapes = [];

shapes.push(new Rect(10, 10, 200, 200));
shapes.push(new Rect(50, 50, 100, 150));

迭代时你可以渲染它们，改变它们等等：

for(var i = 0, shape; shape = shapes[i++];) {
    shape.render(ctx);  // render this shape
    shape.x += 5;       // move 5 pixels to right
}

当然，简化而不是优化，但你应该明白。