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

Question

I found that there's a clearRect() method, but can't find any to clear an arc (or a full circle).

Is there any way to clear an arc in canvas?

Answer 1

There is no clearArc however you can use Composite Operations to achieve the same thing

context.globalCompositeOperation = 'destination-out'

According to MDC the effect of this setting is

The existing content is kept where it doesn't overlap the new shape.

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

So any filled shape with this mode on will end up erasing current canvas content.

Answer 2

This is a circular equivalent of clearRect() . The main thing is setting up a composite operation per @moogoo's answer.

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

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

Answer 3

Nope, once you've drawn something on a canvas there is no object to clear, just the pixels you've drawn. The clearRect method doesn't clear a previously drawn object, it just clears the pixels in the space defined by the parameters. You can use the clearRect method to clear the arc if you know a rectangle which contains it. This will of course clear any other pixels in the area, so you'll have to redraw them.

Edit: MooGoo has given a much better answer below

Answer 4

You can use the clearRect() method to erase a portion of the canvas (including your arc), but when you're using clearRect() with arcs or anything else that you used beginPath() and closePath() for while drawing, you'll need to handle the paths while erasing, too. Otherwise, you may end up with a faded version of your arc still appearing.

//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 5

Make sure to call 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()

Credit to @Gabriele Petrioli in this answer: Why doesn't context.clearRect() work inside requestAnimationFrame loop?

Answer 6

Here's an updated fiddle for you too (uses clearRect): https://jsfiddle.net/x9ztn3vs/2/

It has a clearApple function:

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