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

Question

我发现有一种clearRect()方法,但找不到任何清除弧线(或整圆).

有没有办法在画布上清除弧线？

Answer 1

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

context.globalCompositeOperation = 'destination-out'

根据MDC,这种设置的效果是

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

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

因此,使用此模式的任何填充形状将最终删除当前画布内容.

Answer 2

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

编辑:MooGoo在下面给出了一个更好的答案

Answer 3

您可以使用clearRect()方法擦除画布的一部分(包括您的弧),但是当您使用带有弧的clearRect()或其他任何您使用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: