为什么我的代码中没有清除HTML5画布？

Question

我刚开始使用Canvas编程并尝试构建一个小游戏。下面是我正在尝试的示例代码。我的意图是：

1. 创建画布。
2. 用一些背景颜色填充。
3. 画一个圆圈。
4. 清除画布。
5. 在不同位置画另一个圆圈。

以下是代码：

var canvas = document.createElement('canvas');
canvas.width= 400;
canvas.height = 400;
document.body.appendChild(canvas);

var ctx = canvas.getContext('2d');

// 2. Fill background
ctx.fillStyle = 'rgb(30,0,0)';
ctx.fillRect(0,0,400,400);

// 3. Draw circle
ctx.save();
ctx.fillStyle = 'rgba(256,30,30,.8)';
ctx.arc(50,50, 20, 0, Math.PI*2, true);
ctx.fill();
ctx.restore();

// 4. Clear Canvas
ctx.save();
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.restore();

// 5. Draw another circle
ctx.save();
ctx.fillStyle = 'rgba(256,30,30,.8)';
ctx.arc(150,150, 20, 0, Math.PI*2, true);
ctx.fill();
ctx.restore();

但是正如您所看到的，只有背景颜色被清除，第一个圆圈保持不变。

为什么上面的代码在绘制第二个圆圈之前无法完全清除画布？

Answer 1

如果在开始新路径之前未使用beginPath，则所有draw命令都会在当前路径中保持堆叠。

这里发生的事情是，当您第二次填充（）时，第一个圆仍然在当前路径中，因此即使屏幕被清除，也会有两个圆圈用此单个填充绘制（）命令。

==＆GT;＆GT;在开始新路径之前使用beginPath（）。