html5-canvas
Cancellare lo schermo

Sintassi

• void clearRect (x, y, width, height)
• ImageData createImageData (larghezza, altezza)

Osservazioni

rettangoli

È possibile utilizzare il metodo clearRect per cancellare qualsiasi sezione rettangolare dell'area di clearRect .

// Clear the entire canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);

Nota: clearRect dipende dalla matrice di trasformazione.

Per far fronte a questo, è possibile ripristinare la matrice di trasformazione prima di cancellare la tela.

ctx.save();                                       // Save the current context state
ctx.setTransform(1, 0, 0, 1, 0, 0);               // Reset the transformation matrix
ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
ctx.restore();                                    // Revert context state including 
                                                  // transformation matrix

Nota: ctx.save e ctx.restore vengono richiesti solo se si desidera mantenere lo stato del contesto 2D della tela. In alcune situazioni, il salvataggio e il ripristino possono essere lenti e in generale dovrebbero essere evitati se non richiesti.

Dati immagine grezza

È possibile scrivere direttamente sui dati dell'immagine renderizzata usando putImageData . Creando nuovi dati immagine e assegnandoli alla tela, si cancella l'intero schermo.

var imageData = ctx.createImageData(canvas.width, canvas.height);
ctx.putImageData(imageData, 0, 0);

Nota: putImageData non è interessato da alcuna trasformazione applicata al contesto. Scriverà i dati direttamente nella regione dei pixel sottoposti a rendering.

Forme complesse

È possibile cancellare regioni di forme complesse modificando la proprietà globalCompositeOperation .

// All pixels being drawn will be transparent
ctx.globalCompositeOperation = 'destination-out';

// Clear a triangular section
ctx.globalAlpha = 1;    // ensure alpha is 1
ctx.fillStyle = '#000'; // ensure the current fillStyle does not have any transparency
ctx.beginPath();
ctx.moveTo(10, 0);
ctx.lineTo(0, 10);
ctx.lineTo(20, 10);
ctx.fill();

// Begin drawing normally again
ctx.globalCompositeOperation = 'source-over';

Cancella la tela con il gradiente.

Piuttosto che usare clearRect che rende trasparenti tutti i pixel, potresti volere uno sfondo.

Per cancellare con un gradiente

// create the background gradient once
var bgGrad = ctx.createLinearGradient(0,0,0,canvas.height);
bgGrad.addColorStop(0,"#0FF");
bgGrad.addColorStop(1,"#08F");

// Every time you need to clear the canvas
ctx.fillStyle = bgGrad;
ctx.fillRect(0,0,canvas.width,canvas.height);

Questo è circa la metà di 0.008ms veloci come clearRect 0.004ms ma i 4millions di secondo non dovrebbero avere un impatto negativo su alcuna animazione in tempo reale. (I tempi variano in base al dispositivo, alla risoluzione, al browser e alla configurazione del browser. I tempi sono solo per il confronto)

Cancella la tela usando l'operazione composita

Cancella la tela usando l'operazione di compositing. Ciò cancellerà la tela indipendentemente dalle trasformazioni ma non è veloce come clearRect() .

ctx.globalCompositeOperation = 'copy';

qualsiasi cosa successiva cancellerà il contenuto precedente.