Question

我正在尝试编写一个小的俄罗斯方块克隆来学习Canvas。我有一个单块下降。我只是简单地将其列入了一个列中，用于＆＃39;循环，在下面的网格方框中重绘，然后使用rectClear擦除上面的方块。（笨拙的警报（）是看进展。）

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

有趣的是，如果我换掉＆＃34; clearSquare＆＃34;和＆＃34; drawSquare＆＃34;线条，根本没有被删除。

我不确定这是否是我逻辑中的问题，或者我是否未能掌握画布中的某些内容。正如你所看到的，我笨拙地放入＆＃34; context.save（）＆＃34;如果我的变化没有被承诺＆＃34;什么的，但我相信这在这里是无关紧要的。

这里是JSFiddle

Answer 1

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

要解决，只需在添加矩形之前调用此tp drawSquare方法：

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