Utilisation: context.clearRect(0, 0, canvas.width, canvas.height);
C'est le moyen le plus rapide et le plus descriptif pour effacer l'intégralité du canevas.
Ne pas utiliser: canvas.width = canvas.width;
La réinitialisation canvas.width
réinitialise tous les états du canevas (par exemple les transformations, lineWidth, strokeStyle, etc.), elle est très lente (par rapport à clearRect), elle ne fonctionne pas dans tous les navigateurs et ne décrit pas ce que vous essayez réellement de faire.
Gérer les coordonnées transformées
Si vous avez modifié la matrice de transformation (par exemple , en utilisant scale
, rotate
outranslate
) alors context.clearRect(0,0,canvas.width,canvas.height)
ne sera probablement pas effacer toute la partie visible de la toile.
La solution? Réinitialisez la matrice de transformation avant d'effacer le canevas:
// 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();
Éditer:
je viens de faire du profilage et (dans Chrome), il est environ 10% plus rapide pour effacer un canevas 300x150 (taille par défaut) sans réinitialiser la transformation. À mesure que la taille de votre toile augmente, cette différence diminue.
C'est déjà relativement insignifiant, mais dans la plupart des cas, vous tirerez beaucoup plus que vous ne supprimez et je pense que cette différence de performances n'est pas pertinente.
100000 iterations averaged 10 times:
1885ms to clear
2112ms to reset and clear
clearRect
vous devez soit avoir un contexte non transformé, soit garder une trace de vos limites réelles.