如何在HTML5画布中清除弧线或圆形？

Question

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

有没有办法在画布中清除一条弧线？

- Alex Ivasyuv

---

当你需要清除复杂的形状时，画布抽象库可能会派上用场。这正是为什么我建立了一个。也许它会有用。 - kangax

Answer 1

虽然没有 clearArc，但是您可以使用合成操作来实现相同的效果。

context.globalCompositeOperation = 'destination-out'

根据MDC，此设置的效果是：

在新的形状不重叠的区域，保留现有内容。

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

因此，任何使用此模式的填充形状都将擦除当前画布内容。

- MooGoo

---

谢谢！使用这种方法，我的动画每帧的时间从7毫秒降至0.5毫秒。 - Robin Whittleton

Answer 2

这是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：

- mikemaccana

Answer 3

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

编辑：MooGoo在下面给出了更好的答案

- robertc

---

这是一个好建议。如果你担心清除弧周围的其他内容，请考虑将要绘制的对象分别放在多个画布上（彼此叠放）。这样，对于你的弧周围的小 clearRect 不会擦除一些背景内容，而且你仍然可以避免使用 context.clearRect(0,0,screenWidth, screenHeight) 带来的巨大性能损失。 - Robert Byers

Answer 4

您可以使用clearRect()方法擦除画布的一部分（包括您的弧形），但是如果您在绘制时使用了beginPath()和closePath()来绘制弧形或其他任何内容，并使用clearRect()进行擦除，则您需要在擦除时处理路径。否则，您可能仍会看到已经消失的弧形的淡化版本。

//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();

- reta

Answer 5

请务必调用beginPath()函数。

function animate (){
 requestAnimationFrame(animate)

  c.clearRect(0,0,canvas.width,canvas.height); 

  c.beginPath();
  c.arc(x,y,40,0,Math.PI * 2,false); 
  c.strokeStyle='rgba(200,0,0,1)';
  c.stroke();

 c.fillStyle ='rgba(0,0,0,1)';
 c.fillRect(x,y,100,100);
 x++


} animate()

感谢@Gabriele Petrioli在这个回答中提供的帮助：为什么context.clearRect()不能在requestAnimationFrame循环内工作？

- Squirrl

Answer 6

这里有一个更新的 fiddle（使用 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();
}

- Chris Cousins