¿Cómo puedo borrar un arco o círculo en el lienzo HTML5?

Question

Encontré que hay un método clearRect(), pero no puedo encontrar ninguno para borrar un arco (o un círculo completo).

¿Hay alguna manera de borrar un arco en el lienzo?

Answer 1

No, una vez que ha dibujado algo sobre un lienzo, no hay ningún objeto que borrar, solo los píxeles que ha dibujado. El método clearRect no borra un objeto dibujado previamente, simplemente borra los píxeles en el espacio definido por los parámetros. Puede usar el método clearRect para borrar el arco si conoce un rectángulo que lo contiene. Esto, por supuesto, eliminará cualquier otro píxel en el área, por lo que tendrá que volver a dibujarlos.

Editar: MooGoo has given a much better answer below

Answer 2

No hay clearArc sin embargo se puede utilizar operaciones de composición para lograr lo mismo

context.globalCompositeOperation = 'destination-out' 

De acuerdo con MDC el efecto de este ajuste es

el vigente el contenido se mantiene donde no se superpone a la nueva forma.

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

Así que cualquier forma rellena con este modo en acabará borrando el contenido de la lona actual.

Answer 3

Puede usar el método clearRect() para borrar una parte del lienzo (incluido su arco), pero cuando usa clearRect() con arcos o cualquier otra cosa que haya utilizado beginPath() y closePath() para mientras dibuja, necesitará manejar las rutas mientras borra, también. De lo contrario, puede terminar con una versión descolorida de su arco que aún aparece.

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

Esto es un equivalente circular de clearRect(). Lo principal es configurar una operación compuesta por la respuesta de @moogoo.

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

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

Answer 5

He aquí un violín actualizada para usted también (utiliza clearRect): https://jsfiddle.net/x9ztn3vs/2/

Tiene una función clearApple:

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