擦除画布中的矩形，但它们会回来

Erase rects in Canvas, but they come back

本文关键字：回来 布中 擦除      更新时间：2023-09-26

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

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

有趣的是，如果我交换"clearSquare"和"drawSquare"行，则根本没有删除

任何行。我

不确定这是否是我的逻辑问题，或者我是否未能掌握画布中的某些内容。如您所见，我已经笨拙地输入了"context.save（）"，以防我的更改没有"提交"或其他什么，但我相信这在这里无关紧要。

这是一个JSFiddle

该方法rect()每次调用时都会向当前路径添加一个矩形。清除画布只会清除像素，而不会清除路径，因此下次填充/描边时，它将被包括在内，因此会重新出现。

要解决，只需在添加矩形之前将此 tp 称为 drawSquare 方法：

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

更新的小提琴

相关文章：