Come cancellare la tela per ridisegnare

Dopo aver sperimentato operazioni composite e disegnando immagini sulla tela, ora sto provando a rimuovere immagini e compositing. Come faccio a fare questo?

Devo cancellare la tela per ridisegnare altre immagini; questo può andare avanti per un po ', quindi non credo che disegnare un nuovo rettangolo ogni volta sarà l'opzione più efficiente.

const context = canvas.getContext('2d');

context.clearRect(0, 0, canvas.width, canvas.height);

Uso: context.clearRect(0, 0, canvas.width, canvas.height);

Questo è il modo più rapido e descrittivo per cancellare l'intera tela.

Non usare: canvas.width = canvas.width;

Il ripristino canvas.widthripristina tutto lo stato della tela (ad es. Trasformazioni, lineWidth, strokeStyle, ecc.), È molto lento (rispetto a clearRect), non funziona in tutti i browser e non descrive ciò che stai effettivamente cercando di fare.

Gestire le coordinate trasformate

Se è stato modificato la matrice di trasformazione (ad esempio utilizzando scale, rotateo translate) quindi context.clearRect(0,0,canvas.width,canvas.height)probabilmente non cancellare l'intera porzione visibile della tela.

La soluzione? Ripristina la matrice di trasformazione prima di cancellare l'area di disegno:

// Store the current transformation matrix
context.save();

// Use the identity matrix while clearing the canvas
context.setTransform(1, 0, 0, 1, 0, 0);
context.clearRect(0, 0, canvas.width, canvas.height);

// Restore the transform
context.restore();

Modifica: ho appena fatto un po 'di profilazione e (in Chrome) è circa il 10% più veloce per cancellare una tela 300x150 (dimensione predefinita) senza ripristinare la trasformazione. Man mano che la dimensione della tela aumenta, questa differenza diminuisce.

Questo è già relativamente insignificante, ma nella maggior parte dei casi disegnerai molto più di quello che stai cancellando e credo che questa differenza di prestazioni sia irrilevante.

100000 iterations averaged 10 times:
1885ms to clear
2112ms to reset and clear

Se stai disegnando linee, assicurati di non dimenticare:

context.beginPath();

Altrimenti le linee non verranno cancellate.

Altri hanno già fatto un ottimo lavoro nel rispondere alla domanda, ma se un semplice clear()metodo sull'oggetto contestuale ti fosse utile (lo era per me), questa è l'implementazione che utilizzo in base alle risposte qui:

CanvasRenderingContext2D.prototype.clear = 
  CanvasRenderingContext2D.prototype.clear || function (preserveTransform) {
    if (preserveTransform) {
      this.save();
      this.setTransform(1, 0, 0, 1, 0, 0);
    }

    this.clearRect(0, 0, this.canvas.width, this.canvas.height);

    if (preserveTransform) {
      this.restore();
    }           
};

Uso:

window.onload = function () {
  var canvas = document.getElementById('canvasId');
  var context = canvas.getContext('2d');

  // do some drawing
  context.clear();

  // do some more drawing
  context.setTransform(-1, 0, 0, 1, 200, 200);
  // do some drawing with the new transform
  context.clear(true);
  // draw more, still using the preserved transform
};

• Chrome risponde bene a: context.clearRect ( x , y , w , h );come suggerito da @ Pentium10 ma IE9 sembra ignorare completamente questa istruzione.
• Sembra che IE9 risponda: canvas.width = canvas.width;ma non cancella le linee, solo forme, immagini e altri oggetti a meno che non usi anche la soluzione di @John Allsopp per cambiare prima la larghezza.

Quindi se hai una tela e un contesto creati in questo modo:

var canvas = document.getElementById('my-canvas');
var context = canvas.getContext('2d');

Puoi usare un metodo come questo:

function clearCanvas(context, canvas) {
  context.clearRect(0, 0, canvas.width, canvas.height);
  var w = canvas.width;
  canvas.width = 1;
  canvas.width = w;
}

Questo è il 2018 e non esiste ancora un metodo nativo per cancellare completamente la tela per il ridisegno. clearRect() non cancella completamente la tela. I disegni di tipo non di riempimento non vengono cancellati (ad es. rect())

1.Per cancellare completamente la tela indipendentemente da come si disegna:

context.clearRect(0, 0, context.canvas.width, context.canvas.height);
context.beginPath();

Pro: preserva trattoStyle, fillStyle ecc .; Nessun ritardo;

Contro: non necessario se si sta già usando beginPath prima di disegnare qualcosa

2.Utilizzando l'hack larghezza / altezza:

context.canvas.width = context.canvas.width;

O

context.canvas.height = context.canvas.height;

Pro: Funziona con IE Contro: Reimposta strokeStyle, fillStyle su nero; lag;

Mi chiedevo perché non esistesse una soluzione nativa. In realtà, clearRect()è considerata la soluzione a linea singola perché la maggior parte degli utenti lo fa beginPath()prima di tracciare qualsiasi nuovo percorso. Anche se beginPath deve essere utilizzato solo durante il disegno di linee e non come percorsi chiusirect().

Questo è il motivo per cui la risposta accettata non ha risolto il mio problema e ho finito per perdere ore a provare diversi hack. Ti maledico Mozilla

Usa il metodo clearRect passando le coordinate x, y e l'altezza e la larghezza della tela. ClearRect cancella l'intera tela come:

canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);

ci sono un sacco di buone risposte qui. un'ulteriore nota è che a volte è divertente cancellare solo parzialmente la tela. cioè "sfumare" l'immagine precedente invece di cancellarla del tutto. questo può dare dei bei effetti trail.

è facile. supponendo che il colore di sfondo sia bianco:

// assuming background color = white and "eraseAlpha" is a value from 0 to 1.
myContext.fillStyle = "rgba(255, 255, 255, " + eraseAlpha + ")";
myContext.fillRect(0, 0, w, h);

Un modo rapido è quello di fare

canvas.width = canvas.width

Idk come funziona ma funziona!

Questo è quello che uso, indipendentemente dai confini e dalle trasformazioni della matrice:

function clearCanvas(canvas) {
  const ctx = canvas.getContext('2d');
  ctx.save();
  ctx.globalCompositeOperation = 'copy';
  ctx.strokeStyle = 'transparent';
  ctx.beginPath();
  ctx.lineTo(0, 0);
  ctx.stroke();
  ctx.restore();
}

Fondamentalmente, salva lo stato corrente del contesto e disegna un pixel trasparente con copyas globalCompositeOperation. Quindi ripristina lo stato di contesto precedente.

Questo ha funzionato per il mio grafico a torta in chart.js

<div class="pie_nut" id="pieChartContainer">
    <canvas id="pieChart" height="5" width="6"></canvas> 
</div>

$('#pieChartContainer').html(''); //remove canvas from container
$('#pieChartContainer').html('<canvas id="pieChart" height="5" width="6"></canvas>'); //add it back to the container

Ho scoperto che in tutti i browser che collaudo, il modo più veloce è in realtà riempireRect con il bianco o il colore che desideri. Ho un monitor molto grande e in modalità schermo intero clearRect è stranamente lento, ma fillRect è ragionevole.

context.fillStyle = "#ffffff";
context.fillRect(0,0,canvas.width, canvas.height);

Lo svantaggio è che la tela non è più trasparente.

nel webkit è necessario impostare la larghezza su un valore diverso, quindi è possibile ripristinarla sul valore iniziale

function clear(context, color)
{
    var tmp = context.fillStyle;
    context.fillStyle = color;
    context.fillRect(0, 0, context.canvas.width, context.canvas.height);
    context.fillStyle = tmp;
}

Un modo semplice, ma non molto leggibile è scrivere questo:

var canvas = document.getElementId('canvas');

// after doing some rendering

canvas.width = canvas.width;  // clear the whole canvas

Lo uso sempre

cxt.fillStyle = "rgb(255, 255, 255)";
cxt.fillRect(0, 0, canvas.width, canvas.height);

context.clearRect(0,0,w,h)   

riempi il rettangolo dato con i valori RGBA:
0 0 0 0: con Chrome
0 0 0 255: con FF e Safari

Ma

context.clearRect(0,0,w,h);    
context.fillStyle = 'rgba(0,0,0,1)';  
context.fillRect(0,0,w,h);  

lascia che il rettangolo si riempia di
0 0 0 255,
indipendentemente dal browser!

Context.clearRect(starting width, starting height, ending width, ending height);

Esempio: context.clearRect(0, 0, canvas.width, canvas.height);

il modo più breve:

canvas.width += 0

modo più veloce:

canvas = document.getElementById("canvas");
c = canvas.getContext("2d");

//... some drawing here

i = c.createImageData(canvas.width, canvas.height);
c.putImageData(i, 0, 0); // clear context by putting empty image data

Se usi solo clearRect, se lo hai in un modulo per inviare il tuo disegno, otterrai un invio invece della cancellazione, o forse può essere prima cancellato e quindi caricare un disegno vuoto, quindi dovrai aggiungere un preventDefault all'inizio della funzione:

   function clearCanvas(canvas,ctx) {
        event.preventDefault();
        ctx.clearRect(0, 0, canvas.width, canvas.height);
    }


<input type="button" value="Clear Sketchpad" id="clearbutton" onclick="clearCanvas(canvas,ctx);">

Spero che aiuti qualcuno.

Lo uso sempre

ctx.clearRect(0, 0, canvas.width, canvas.height)
window.requestAnimationFrame(functionToBeCalled)

NOTA

la combinazione di clearRect e requestAnimationFrame consente un'animazione più fluida se è quello che stai cercando

Questi sono tutti ottimi esempi di come si cancella un'area di disegno standard, ma se si utilizzano paperjs, allora funzionerà:

Definire una variabile globale in JavaScript:

var clearCanvas = false;

Dal tuo PaperScript definisci:

function onFrame(event){
    if(clearCanvas && project.activeLayer.hasChildren()){
        project.activeLayer.removeChildren();
        clearCanvas = false;
    }
}

Ora, ovunque imposti clearCanvas su true, cancellerà tutti gli elementi dallo schermo.