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
}

當然，簡化而不是優化，但你應該明白。