如何清除HTML5画布中的圆弧或圆圈？

Question

我发现有一个clearRect()方法，但无法找到任何清除圆弧（或整圆）的方法。

有什么办法清除画布中的弧线？

Answer 1

不是，一旦你在画布上绘制了一些东西，就没有任何东西可以清除，只是你绘制的像素。 clearRect方法不清除先前绘制的对象，它只是清除参数定义的空间中的像素。如果您知道包含它的矩形，则可以使用clearRect方法清除圆弧。这当然会清除该区域中的任何其他像素，因此您必须重新绘制它们。

编辑：MooGoo has given a much better answer below

Answer 2

没有clearArc但是你可以使用组合操作来实现同样的事情

context.globalCompositeOperation = 'destination-out' 

根据MDC此设置的效果

现有内容保持在与新形状不重叠的位置。

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Compositing

所以用这个模式中的任何填充形状上最终会消除当前画布的内容。

Answer 3

您可以使用clearRect（）方法擦除画布的一部分（包括您的弧线），但是当您使用clearRect（）和arcs或其他使用beginPath（）和closePath（）在绘图时，您也需要在擦除时处理路径。否则，你可能最终会出现一个褪色的弧形版本。

//draw an arc (in this case, a circle) 
context.moveTo(x, y); 
context.beginPath(); 
context.arc(x,y,radius,0,Math.PI*2,false); 
context.closePath(); 
context.strokeStyle = "#ccc"; 
context.stroke(); 

//now, erase the arc by clearing a rectangle that's slightly larger than the arc 
context.beginPath(); 
context.clearRect(x - radius - 1, y - radius - 1, radius * 2 + 2, radius * 2 + 2); 
context.closePath(); 

Answer 4

这是一个相当于clearRect()的圆形。主要是根据@ moogoo的答案设置一个复合操作。

var cutCircle = function(context, x, y, radius){ 
    context.globalCompositeOperation = 'destination-out' 
    context.arc(x, y, radius, 0, Math.PI*2, true); 
    context.fill(); 
} 

见https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html：

Answer 5

这里有一个更新的捣鼓你太（使用clearRect）：https://jsfiddle.net/x9ztn3vs/2/

它有一个clearApple功能：

block.prototype.clearApple = function() { 
    ctx.beginPath(); 
    ctx.clearRect(this.x - 6, this.y - 6, 2 * Math.PI, 2 * Math.PI); 
    ctx.closePath(); 
}