javascript - 使用 Javascript 在 HTML5 中重绘 Canvas

Question

我正在创建一个点击清除游戏。一旦用户点击某个砖 block ，它的相邻砖 block 就会被检查是否具有相同的颜色，并且所有这些砖 block 都会立即被清除。

这些是使用 clearRect() 函数清除的。

现在这会在上面的砖 block 和下面的砖 block 之间留下一个白色的补丁，让上面的砖 block 悬空。

现在我想把上面的这些砖 block 往下搬。我该怎么做呢..？请帮忙

Answer 1

问题很模糊，但是根据标题，您需要先清除 Canvas ，然后才能重绘。否则，绘制的元素将简单地堆叠在一起。

为此，请在 Canvas 本身上调用函数 clearRect:

function clear() {
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    ctx.clearRect(0, 0, 500, 500);
}

其中 canvas 是 Canvas 的 ID，500, 500 是尺寸。现在您将拥有一个空 Canvas ，您可以在其中重新绘制所有内容。

我曾经创造过a simple HTML5 canvas game同样，您也可以从源代码中学习。