html5-canvas
Effacer l'écran

Syntaxe

• void clearRect (x, y, largeur, hauteur)
• ImageData createImageData (width, height)

Remarques

Rectangles

Vous pouvez utiliser la méthode clearRect pour effacer toute section rectangulaire du canevas.

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

Remarque: clearRect dépend de la matrice de transformation.

Pour faire face à cela, il est possible de réinitialiser la matrice de transformation avant d'effacer le canevas.

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

Remarque: ctx.save et ctx.restore ne sont requis que si vous souhaitez conserver l'état du contexte 2D du canevas. Dans certaines situations, la sauvegarde et la restauration peuvent être lentes et généralement évitées si elles ne sont pas requises.

Données d'image brutes

Il est possible d'écrire directement sur les données d'image rendues en utilisant putImageData . En créant de nouvelles données d’image puis en les affectant au canevas, vous effacez l’écran entier.

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

Remarque: putImageData n'est pas affecté par les transformations appliquées au contexte. Il écrira des données directement dans la région de pixels rendue.

Formes complexes

Il est possible d'effacer des régions de formes complexes en modifiant la propriété 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';

Effacer la toile avec dégradé.

Plutôt que d'utiliser clearRect qui rend tous les pixels transparents, vous pouvez souhaiter un arrière-plan.

Effacer avec un dégradé

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

Ceci est environ deux fois moins rapide que 0,008 0.008ms comme 0.008ms à 0,004 0.004ms mais les 4 millions de secondes ne devraient pas avoir d'impact négatif sur une animation en temps réel. (Les temps varient considérablement en fonction de l'appareil, de la résolution, du navigateur et de la configuration du navigateur. Les temps sont uniquement pour comparaison)

Effacer la toile en utilisant l'opération composite

Effacer le canevas en utilisant l'opération de compositing. Cela clearRect() le canevas indépendamment des transformations mais n'est pas aussi rapide que clearRect() .

ctx.globalCompositeOperation = 'copy';

tout ce qui sera dessiné ensuite effacera le contenu précédent.