html5-canvas
Bildschirm löschen

Syntax

• void clearRect (x, y, Breite, Höhe)
• ImageData createImageData (Breite, Höhe)

Bemerkungen

Rechtecke

Sie können die clearRect Methode verwenden, um alle rechteckigen clearRect der Leinwand zu löschen.

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

Hinweis: clearRect ist von der Transformationsmatrix abhängig.

Um dies zu umgehen, können Sie die Transformationsmatrix zurücksetzen, bevor Sie den Canvas löschen.

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

Hinweis: ctx.save und ctx.restore sind nur erforderlich, wenn Sie den 2D-Kontextstatus der ctx.restore beibehalten möchten. In einigen Situationen kann das Speichern und Wiederherstellen langsam sein und sollte generell vermieden werden, wenn dies nicht erforderlich ist.

Rohe Bilddaten

Mit putImageData Sie direkt in die gerenderten Bilddaten putImageData . Wenn Sie neue Bilddaten erstellen und sie der Leinwand zuweisen, löschen Sie den gesamten Bildschirm.

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

Hinweis: putImageData ist nicht von Transformationen betroffen, die auf den Kontext angewendet werden. Es werden Daten direkt in den gerenderten Pixelbereich geschrieben.

Komplexe Formen

Sie können komplex geformte Bereiche löschen, indem Sie die Eigenschaft 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';

Leinwand mit Farbverlauf löschen.

Anstatt clearRect , wodurch alle Pixel transparent werden, möchten Sie möglicherweise einen Hintergrund.

Mit einem Farbverlauf löschen

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

Dies ist etwa halb so schnell wie 0,008 0.004ms wie bei 0.008ms 0,004 0.004ms aber die 4 Millionen Sekunden sollten sich nicht negativ auf Echtzeitanimationen auswirken. (Die Zeiten variieren je nach Gerät, Auflösung, Browser und Browserkonfiguration erheblich. Die Zeiten dienen nur zum Vergleich.)

Löschen Sie die Leinwand mit der Composite-Funktion

Löschen Sie die Leinwand mit dem Compositing-Vorgang. Dadurch wird die Leinwand unabhängig von Transformationen clearRect() , sie ist jedoch nicht so schnell wie clearRect() .

ctx.globalCompositeOperation = 'copy';

Alles, was als Nächstes gezeichnet wird, löscht den vorherigen Inhalt.