Come cancellare la tela per ridisegnare

Question

Dopo aver sperimentato con le operazioni composite e disegnare le immagini sulla tela ora sto cercando di rimuovere le immagini e compositing. Come posso fare questo?

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

Answer 1

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

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

Answer 2

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

Questo è il modo più veloce e più descrittivo per cancellare l'intero quadro.

Non utilizzare: canvas.width = canvas.width;

Ripristino canvas.width resetta tutto lo stato tela (ad esempio le trasformazioni, larghezza di riga, strokeStyle, ecc), è molto lento (rispetto al clearRect), non funziona in tutti i browser, e non descrive quello che sono in realtà cercando di fare.

Trattare con coordinate trasformate

Se si è modificata la matrice di trasformazione (esempio impiegando scale, rotate o translate) allora context.clearRect(0,0,canvas.width,canvas.height) sarà probabilmente non cancellare l'intera porzione visibile della tela.

La soluzione? Reimpostare la matrice di trasformazione prima di cancellare la tela:

// 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) è di circa il 10% più veloce per cancellare un 300x150 (dimensione predefinita) tela senza ripristinare la trasformazione. Come la dimensione della tua tela aumenta questa differenza scende.

Questo è già relativamente insignificante, ma nella maggior parte dei casi si redigerà molto più di quanto si sta cancellando e credo che questa differenza di prestazioni sia irrilevante.

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

Answer 3

Se si sta disegnando linee, assicurarsi di non dimenticare:

context.beginPath();

In caso contrario, le linee non avranno eliminato.

Answer 4

Gli altri hanno già fatto un ottimo lavoro di rispondere alla domanda, ma se un metodo semplice clear() sull'oggetto contesto sarebbe utile a voi (è stato per me), questo è l'applicazione che utilizzare in base alla 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();
    }           
};

Utilizzo:

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
};

Answer 5

• Chrome risponde bene a:. context.clearRect ( x , y , w , h ); come suggerito da @ Pentium10 ma IE9 sembra ignorare completamente questa istruzione
• IE9 sembra rispondere a: canvas.width = canvas.width; ma fa le linee non chiare, solo forme, immagini e altri oggetti a meno che non si utilizza anche la soluzione di @ John Allsopp della prima modificare la larghezza
.

Quindi, se avete una tela e il contesto creato in questo modo:

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

È possibile utilizzare 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;
}

Answer 6

Utilizza metodo clearRect passando x, y coordinate e l'altezza e la larghezza della tela. ClearRect cancellerà tutta la tela come:

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

Answer 7

Questo è il 2018 e ancora non esiste un metodo nativo per cancellare completamente tela per ridisegnare. clearRect() non cancellare completamente la tela. di tipo non-fill disegni non vengono cancellati out (ad es. rect())

1.To completamente di tela chiara a prescindere da come si disegna:

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

Pro: Conserve strokeStyle, fillStyle ecc .; Nessun ritardo;

Contro: non necessario se si sta già utilizzando BeginPath prima di trarre qualsiasi cosa

2.Using l'hack larghezza / altezza:

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

o

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

Pro: Funziona con IE Contro: Ripristina strokeStyle, FillStyle al nero; Lag;

Mi chiedevo perché una soluzione nativa non esiste. In realtà, clearRect() è considerato come la soluzione singola linea perché la maggior parte degli utenti non beginPath() prima di trarre qualsiasi nuovo percorso. Sebbene BeginPath è da utilizzare solo durante il disegno linee e percorso non chiuso come rect().

Questo è il motivo per cui la risposta accettata non ha risolto il mio problema e ho finito per sprecare ore provando diverse hack. Vi maledicono Mozilla

Answer 8

ci sono un sacco di buone risposte qui. un ulteriore nota è che a volte è divertente solo parzialmente chiara la tela. cioè "dissolvenza" l'immagine precedente invece di cancellare completamente. questo può dare bei sentieri effetti.

è facile. supponendo il colore di sfondo è 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);

Answer 9

Un modo veloce è quello di fare

canvas.width = canvas.width

IDK come funziona, ma lo fa!

Answer 10

in WebKit è necessario impostare la larghezza su un valore diverso, allora si può impostare di nuovo al valore iniziale

Answer 11

Ho scoperto che in tutti i browser I TEST, il modo più veloce è quello di realtà fillRect con il bianco, o whataever colore che si vorrebbe. Ho un grande monitor e in modalità a schermo intero la clearRect è estrema lentezza, ma il fillRect è ragionevole.

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

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

Answer 12

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

Answer 13

Questo ha lavorato per il mio pieChart 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

Answer 14

Questo è quello che uso, a prescindere confini e trasformazioni di 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();
}

In sostanza, si salva lo stato attuale del contesto, e richiama un pixel trasparente con copy il globalCompositeOperation . Poi, ripristina il precedente stato di contesto.

Answer 15

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

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

// after doing some rendering

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

Answer 16

Io uso sempre

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

Answer 17

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

Answer 18

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

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

Ma

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

lasciare che il rettangolo riempito con
0 0 0 255
non importa il browser!

Answer 19

Se si utilizza clearRect solo, se lo avete in un modulo per inviare il disegno, si otterrà un presentare invece la radura, o forse può essere cancellato e poi caricare un disegno vuoto, quindi avrai bisogno per aggiungere un preventDefault al beggining 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);">

Speranza che aiuta qualcuno.

Answer 20

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

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

Answer 21

Questi sono tutti ottimi esempi di come si cancella una tela standard, ma se si utilizza paperjs, allora questo lavoro:

Definire una variabile globale in JavaScript:

var clearCanvas = false;

Dal tuo PaperScript definire:

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

Ora, ovunque si imposta clearCanvas true, sarà chiaro tutti gli elementi dallo schermo.