Come posso cancellare un arco o un cerchio nella tela HTML5?

Question

Ho scoperto che esiste un metodo clearRect(), ma non è possibile trovarne uno per cancellare un arco (o un cerchio completo).

C'è un modo per cancellare un arco su tela?

Answer 1

No, una volta disegnato qualcosa su una tela non c'è alcun oggetto da cancellare, solo i pixel che hai disegnato. Il metodo clearRect non cancella un oggetto disegnato in precedenza, ma cancella i pixel nello spazio definito dai parametri. È possibile utilizzare il metodo clearRect per cancellare l'arco se si conosce un rettangolo che lo contiene. Ovviamente questo cancellerà tutti gli altri pixel nell'area, quindi dovrai ridisegnarli.

Edit: MooGoo has given a much better answer below

Answer 2

Non c'è clearArc tuttavia è possibile utilizzare le operazioni composite per ottenere la stessa cosa

context.globalCompositeOperation = 'destination-out' 

Secondo MDC l'effetto di questa impostazione è

L'attuale il contenuto viene mantenuto dove non si sovrappone alla nuova forma.

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

Quindi, qualsiasi forma piena con questa modalità finirà per cancellare il contenuto di tela corrente.

Answer 3

È possibile utilizzare il metodo clearRect() per cancellare una porzione dell'area di disegno (incluso l'arco), ma quando si utilizza clearRect() con archi o qualsiasi altra cosa si è utilizzato beginPath() e closePath() per durante il disegno, dovrai gestire anche i percorsi durante la cancellazione. Altrimenti, potresti ritrovarti con una versione sbiadita del tuo arco.

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

Questo è un equivalente circolare di clearRect(). La cosa principale è impostare un'operazione composta per la risposta di @ moogoo.

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

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

Answer 5

Ecco un violino aggiornato anche per te (utilizza clearRect): https://jsfiddle.net/x9ztn3vs/2/

ha una funzione clearApple:

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