Javascript HTML5画布：如何枚举所有对象

如何枚举已添加到canvas元素的所有对象并对其进行迭代

---

顺便说一句，jCanvas是可用的。

在画布上，您在一张没有元素的纸上绘制。如果您需要能够操纵元素，那么可以使用svg

如果使用jCanvas，则可以将每个元素添加到不同的层，使用

getLayers

方法检索它们（请参见），并迭代它返回的数组：

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

---

对于更细粒度的控制，我建议您查看画布库，例如，它提供与Flash中类似的全功能显示列表。

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

但是，您可以创建自己的对象来表示正在绘制到画布上的对象，并将这些对象存储在数组中。通过这种方式，您可以迭代、更改和重新绘制画布上的对象（甚至可以根据需要将它们导出为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
}

---

当然，这里是简化的，不是优化的，但你应该明白这一点。

很公平-你必须建立自己的模型，只需将画布用作绘图表面即可。