Comment faire pour effacer la toile pour redessiner

Question

Après avoir expérimenté avec composite opérations et dessiner des images sur la toile, je suis maintenant essayer de supprimer les images et le montage. Comment dois-je faire?

J'ai besoin de vider la toile pour redessiner d'autres images; cela peut durer un certain temps, donc je ne pense pas que le dessin d'un rectangle à chaque fois que sera l'option la plus efficace.

Answer 1

context.clearRect ( x , y , w , h );

ou

canvas.width = canvas.width;

Answer 2

Le problème avec la réinitialisation canvas.width , c'est qu'il réinitialise tous les canevas de l'état (par exemple, les transformations, la largeur de raie, strokeStyle, etc.) et que c'est très lent par rapport à clearRect.

Le problème avec l'aide d' ctx.clearRect(0,0,canvas.width,canvas.height) , c'est que si vous avez modifié la matrice de transformation, vous probablement ne sera pas de compensation de la toile correctement.

La solution? Réinitialiser la matrice de transformation avant de compensation de la toile:

// Store the current transformation matrix
ctx.save();

// Use the identity matrix while clearing the canvas
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, canvas.width, canvas.height);

// Restore the transform
ctx.restore();

Edit: Je viens de faire un certain profilage et (Chrome) c'est environ 10% plus rapide pour effacer un 300x150 (taille par défaut) toile sans réinitialisation de la transformation. Comme la taille de votre toile augmente cette différence sera en baisse.

C'est déjà relativement insignifiant, mais dans la plupart des cas, vous serez beaucoup plus que vous êtes à la compensation et je crois que cette différence de performances être hors de propos.

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

Answer 3

Si vous êtes le dessin des lignes, assurez-vous que vous n'oubliez pas:

context.beginPath();

Sinon, les lignes ne seront pas effacées.

Answer 4

D'autres ont déjà fait un excellent travail pour répondre à la question, mais si un simple clear() méthode sur l'objet de contexte serait peut-être utile (c'était pour moi), c'est la mise en œuvre-je utiliser basée sur les réponses ici:

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

Utilisation:

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 répond bien à l': context.clearRect ( x , y , w , h ); comme suggéré par @Pentium10 mais IE9 semble complètement ignorer cette instruction.
• IE9 semble répondre à: canvas.width = canvas.width; mais il n'est pas évident de lignes, juste des formes, des images et d'autres objets, sauf si vous utilisez également @John Allsopp la solution de la première modification de la largeur.

Donc, si vous avez une toile et le contexte créé comme ceci:

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

Vous pouvez utiliser une méthode comme ceci:

function clearCanvas(context, canvas) {
  context.clearRect(0, 0, canvas.width, canvas.height);
  var w = canvas.width;
  canvas.width = 1;
  canvas.width = w;
}