Question

我正在尝试基本上使用网格，我可以创建图像并将它们相应地放置在网格上，并实时更改网格图像的位置。

我使用html5＆＃39;

<canvas></canvas>

然而，我发现每次我想要删除DrawImage或Rectangle我必须使用

clearRect()

这是一个巨大的麻烦，与重叠的图像/形状冲突。除了必须使用

之外，还有其他方法可以做到这一点

clearRect()

每一次？甚至可能是一个完全不同的网格或画布，如系统。

Answer 1

你必须清除整个画布并重新开始每个刻度。您应该将图像存储在一个数组中，以便跟踪它们：

[
    {
        image: "image_bottom.png",
        x: 100,
        y: 200
    },
    {
        image: "image_middle.png",
        x: 10,
        y: 200
    },
    {
        image: "image_topmost.png",
        x: 100,
        y: 20
    }
]

然后在每个刻度上循环并绘制它们。第一个将位于最底层。

// Redraws the canvas completely
// pseudo code
function tick(){
    canvas.clearRect(0,0,element.width,element.height)

    for each in list
        draw image
};

setInterval(tick,1000/60); // draw for 60FPS

tick函数将每隔几毫秒渲染一次画布，以获得60FPS。

完全重新渲染是执行此操作的最佳方式。您可以采用其他方式，但需要复杂的屏蔽和循环像素。

HTML 5使用画布或画布替代方案

1 个答案: