擦除 Canvas 中的矩形，但它们又回来了

Question

我正在尝试编写一个小的俄罗斯方块克隆来学习 Canvas。我已经达到了单块掉落的程度。我只是让它在 'for' 循环中下降一列，在下面的网格正方形中重新绘制，然后使用 rectClear 擦除上面的正方形。（笨拙的alert()就是为了看到进度）

for (var y = 21; y >= 0; y--) {
    drawSquare(3,y,'green');
    clearSquare(3,(y+1));
    alert(y);
};

有趣的是，如果我交换 "clearSquare" 和 "drawSquare" 行，none 会被完全删除。

我不确定这是否是我逻辑上的问题，或者我是否没有掌握canvas中的某些内容。如您所见，我笨拙地输入了 "context.save()" 以防我的更改不是 "committed" 或其他内容，但我认为这在这里有点无关紧要。

这是一个JSFiddle

Answer 1

方法rect()每次调用都会在当前路径中添加一个矩形。清除 canvas 只会清除像素，不会清除路径，所以下次你 fill/stroke 它将被包括在内，因此会重新出现。

要解决这个问题，只需在添加矩形之前调用 drawSquare 方法即可：

ctx.beginPath();   // this will start a new path, clearing the old
ctx.rect(...);

Erase rects in Canvas, but they come back