Come cancellare la tela per ridisegnare
-
22-09-2019 - |
Domanda
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.
Soluzione
const context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);
Altri suggerimenti
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
Se si sta disegnando linee, assicurarsi di non dimenticare:
context.beginPath();
In caso contrario, le linee non avranno eliminato.
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
};
- 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;
}
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);
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
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);
Un modo veloce è quello di fare
canvas.width = canvas.width
IDK come funziona, ma lo fa!
in WebKit è necessario impostare la larghezza su un valore diverso, allora si può impostare di nuovo al valore iniziale
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.
function clear(context, color)
{
var tmp = context.fillStyle;
context.fillStyle = color;
context.fillRect(0, 0, context.canvas.width, context.canvas.height);
context.fillStyle = tmp;
}
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
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.
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
Io uso sempre
cxt.fillStyle = "rgb(255, 255, 255)";
cxt.fillRect(0, 0, canvas.width, canvas.height);
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
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!
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.
Context.clearRect(starting width, starting height, ending width, ending height);
Esempio: context.clearRect(0, 0, canvas.width, canvas.height);
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.