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

时间:2010-08-25 10:03:45

标签: javascript html5 canvas

我发现有clearRect()方法,但无法找到任何清除弧线(或整圆)。

有没有办法在画布上清除圆弧?

6 个答案:

答案 0 :(得分:31)

没有clearArc但是你可以使用Composite Operations来实现同样的目标

context.globalCompositeOperation = 'destination-out'

根据MDC,此设置的效果是

  

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

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

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

答案 1 :(得分:10)

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

修改:MooGoo has given a much better answer below

答案 2 :(得分:8)

你可以使用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();

答案 3 :(得分:8)

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

答案 4 :(得分:1)

确保调用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致谢:Why doesn't context.clearRect() work inside requestAnimationFrame loop?

答案 5 :(得分:0)

这里也是一个更新的小提琴(使用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();
}