为什么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命令会在当前路径中保持堆叠。

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

== >>在开始新路径之前使用beginPath（）。