javascript - 删除用HTML5 Canvas 制作的圆圈

This question already has answers here:

Erasing previously drawn lines on an HTML5 canvas
                                
                                    （5个答案）
                                
                        
                                2年前关闭。
            
                    
我已经在画布上画了形状。当我想删除它们时，我基本上会再次创建相同的形状，但是它是白色的，因此我不会删除任何其他形状（保存了x和y坐标，因此不必担心）

ctx.fillStyle="#FFFFFF";
ctx.strokeStyle="#FFFFFF";

ctx.beginPath();
ctx.arc(x, y, 40, 0, 2 * Math.PI);
ctx.fill();

问题是，在某些形状上仍然有剩余的黑色靠垫，我无法摆脱（在其他形状上更糟）

我想念什么？

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

ctx.beginPath();
ctx.arc(50,50 , 40, 0, 2 * Math.PI);
ctx.fill();

ctx.fillStyle="#FFFFFF";
ctx.strokeStyle="#FFFFFF";

ctx.beginPath();
ctx.arc(50,50 , 40, 0, 2 * Math.PI);
ctx.fill();

<canvas id="myCanvas" width="1000" height=600 style="border: 1px solid #000000;">
</canvas>

编辑：https://jsfiddle.net/sfj5y091/3/

编辑2：
最后，我通过在系统中删除一个形状后完全重绘所有形状来解决了这个问题，甚至可以删除重叠的形状而不会破坏另一个形状

最佳答案

残留是由平滑或抗锯齿引起的。

为了在最初的白色背景上绘制黑色圆圈，在40像素半径的圆的边缘绘制了一个灰色像素的“光环”，以使其具有平滑的外观，并且该“光环”比你打算画画。

然后，如果在其上方绘制一个40像素半径的白色圆圈，它将新的白色边缘像素与现在的非白色背景混合。结果是较亮的灰色像素，而不是白色像素。

如果您唯一的选择仍然是在旧像素上绘画，则必须为白色圆圈使用稍大的半径：

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

ctx.beginPath();
ctx.arc(50, 50, 40, 0, 2 * Math.PI); // radius of 40
ctx.fill();

ctx.fillStyle = "#FFFFFF";
ctx.strokeStyle = "#FFFFFF";

ctx.beginPath();
ctx.arc(50, 50, 41, 0, 2 * Math.PI); // radius of 41
ctx.fill();

<canvas id="myCanvas" width="150" height="150" style="border: 1px solid #000000;">
</canvas>
<br /> Nothing to see here ;-)

有关抗锯齿的更多信息，请参见Can I turn off antialiasing on an HTML <canvas> element?