HTML5 Canvas：如何枚举所有对象答案

【问题标题】：HTML5 Canvas: How to enumerate all objectsHTML5 Canvas：如何枚举所有对象
【发布时间】：2014-03-21 00:05:06
【问题描述】：

我如何/是否可以枚举所有已添加到画布元素的对象，并对其进行迭代？

顺便说一句 - jCanvas 可用。

【问题讨论】：

标签： javascript html canvas

【解决方案1】：

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
}

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

【讨论】：

很公平 - 您必须构建自己的模型，然后将画布用作绘图表面。

【解决方案2】：

如果您使用的是 jCanvas，您可以将每个元素添加到不同的层，使用 getLayers 方法检索它们（请参阅 documentation），然后遍历它返回的数组：

getLayers() 方法返回一个包含每个图层对象的数组。因此，您可以在检索到数组后对其进行操作。

对于更精细的控制，我建议您查看像 easel.js 这样的画布库，它为您提供类似于 Flash 中的功能齐全的显示列表。

【讨论】：

【解决方案3】：

在画布中，你是在一张没有元素的纸上画画。如果您需要能够操作的元素，请使用 svg。

【讨论】：