Comment effacer la toile pour redessiner

Question

Après avoir expérimenté avec des opérations composites et dessiner des images sur la toile, je suis maintenant essayer de supprimer des images et compositing. Comment puis-je faire?

Je dois effacer la toile pour redessiner d'autres images; cela peut se poursuivre pendant un certain temps, donc je ne pense pas que dessiner un nouveau rectangle à chaque fois que sera l'option la plus efficace.

Answer 1

const context = canvas.getContext('2d');

context.clearRect(0, 0, canvas.width, canvas.height);

Answer 2

Utilisation: context.clearRect(0, 0, canvas.width, canvas.height);

Ceci est la façon d'effacer toute la toile la plus rapide et la plus appropriée.

Ne pas utiliser: canvas.width = canvas.width;

Remise à zéro canvas.width remet à zéro tout état de toile (par exemple les transformations, lineWidth strokeStyle, etc.), il est très lent (par rapport à clearRect), il ne fonctionne pas dans tous les navigateurs, et il ne décrit pas ce que vous êtes réellement en essayant de le faire.

Traitement des coordonnées transformées

Si vous avez modifié la matrice de transformation (par exemple en utilisant scale, rotate ou translate) alors context.clearRect(0,0,canvas.width,canvas.height) ne sera probablement pas effacer toute la partie visible de la toile.

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

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

Edit: Je viens de faire un certain profilage et (Chrome), il est environ 10% plus rapide pour effacer une toile 300x150 (taille par défaut) sans réinitialiser la transformation. Comme la taille de votre toile augmente cette différence diminue.

C'est déjà relativement insignifiante, mais dans la plupart des cas, vous tirerez beaucoup plus que vous la compensation et je crois que cette différence de performance est pas pertinente.

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

Answer 3

Si vous dessinez des lignes, assurez-vous de ne pas oublier:

context.beginPath();

Sinon, les lignes ne seront pas effacées.

Answer 4

D'autres ont déjà fait un excellent travail répondant à la question, mais si une méthode simple clear() sur l'objet de contexte serait utile pour vous (il était à moi), c'est la mise en œuvre que j'utilise en fonction des 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 à:. context.clearRect ( x , y , w , h ); comme suggéré par @ Pentium10 mais IE9 semble ignorer complètement cette instruction
• IE9 semble répondre à: canvas.width = canvas.width; mais il ne les lignes claires, des formes justes, des images et d'autres objets, sauf si vous utilisez également la solution de @John Allsopp 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;
}

Answer 6

Utiliser la méthode clearRect en faisant passer x, y coordonnées et la hauteur et la largeur de la toile. ClearRect effacera la toile tout comme:

canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);

Answer 7

Ceci est 2018 et encore il n'y a pas de méthode native de toile tout à fait clair pour redessiner. clearRect() ne pas complètement effacer la toile. dessins de type non-remplissage ne sont pas effacés à (par exemple. rect())

1.To toile complètement clair, quelle que soit la façon dont vous dessinez:

context.clearRect(0, 0, context.canvas.width, context.canvas.height);
context.beginPath();

Plus: Préserve strokeStyle, fillStyle etc .; Pas de décalage;

Inconvénients: si vous Unnecessary utilisez déjà beginPath avant tout dessin

2. À l'aide du piratage largeur / hauteur:

context.canvas.width = context.canvas.width;

ou

context.canvas.height = context.canvas.height;

Avantages: Fonctionne avec IE Inconvénients: Remet strokeStyle, fillStyle au noir; Laggy;

Je me demandais pourquoi une solution native n'existe pas. En fait, clearRect() est considéré comme la solution de ligne unique parce que la plupart des utilisateurs ne beginPath() avant de tirer une nouvelle voie. Bien que beginPath ne doit être utilisé en traçant des lignes, et non comme chemin fermé rect().

Ceci est la raison pour laquelle la réponse acceptée n'a pas résolu mon problème et je fini par heures gaspillant essayer différents hacks. Malédiction vous mozilla

Answer 8

il y a une tonne de bonnes réponses ici. une autre est à noter que parfois, il est amusant de la toile que partiellement clair. qui est, « fade out » l'image précédente au lieu de l'effacer complètement. cela peut donner des effets agréables sentiers.

il est facile. en supposant que votre couleur de fond est blanc:

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

Answer 9

Un moyen rapide est de faire

canvas.width = canvas.width

idk comment cela fonctionne, mais il le fait!

Answer 10

WebKit vous devez définir la largeur à une valeur différente, vous pourrez revenir à la valeur initiale

Answer 11

J'ai trouvé que dans tous les navigateurs, je test, le plus rapide est de réellement fillRect avec le blanc, ou whataever couleur que vous souhaitez. J'ai un très grand écran et en mode plein écran est le clearRect atrocement lent, mais le fillRect est raisonnable.

context.fillStyle = "#ffffff";
context.fillRect(0,0,canvas.width, canvas.height);

L'inconvénient est que la toile est plus transparent.

Answer 12

function clear(context, color)
{
    var tmp = context.fillStyle;
    context.fillStyle = color;
    context.fillRect(0, 0, context.canvas.width, context.canvas.height);
    context.fillStyle = tmp;
}

Answer 13

Cela a fonctionné pour mon PieChart dans 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

Answer 14

est ce que je l'utilise, quelles que soient les frontières et les transformations de 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();
}

En fait, il enregistre l'état actuel du contexte, et dessine un pixel transparent avec copy comme globalCompositeOperation . Ensuite, restaure l'état de contexte précédent.

Answer 15

Une façon simple, mais pas très lisible est d'écrire ceci:

var canvas = document.getElementId('canvas');

// after doing some rendering

canvas.width = canvas.width;  // clear the whole canvas

Answer 16

J'utilise toujours

cxt.fillStyle = "rgb(255, 255, 255)";
cxt.fillRect(0, 0, canvas.width, canvas.height);

Answer 17

moyen le plus rapide:

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

Answer 18

context.clearRect(0,0,w,h)   

remplir le rectangle donné avec les valeurs RGBA:
0 0 0 0: avec Chrome
0 0 0 255: avec FF & Safari

context.clearRect(0,0,w,h);    
context.fillStyle = 'rgba(0,0,0,1)';  
context.fillRect(0,0,w,h);  

laisser le rectangle rempli de
0 0 0 255
peu importe le navigateur!

Answer 19

Si vous utilisez clearRect uniquement, si vous avez un formulaire pour soumettre votre dessin, vous aurez une place soumettre la compensation, ou peut-être il peut être effacé d'abord, puis télécharger un dessin vide, vous aurez donc besoin d'ajouter un preventDefault au beggining de la fonction:

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

Je espère que ça aide quelqu'un.

Answer 20

Context.clearRect(starting width, starting height, ending width, ending height);

Exemple: context.clearRect(0, 0, canvas.width, canvas.height);

Answer 21

Ce sont tous d'excellents exemples de la façon dont vous videz une toile standard, mais si vous utilisez paperjs, cela fonctionnera:

Définir une variable globale en JavaScript:

var clearCanvas = false;

De votre PaperScript définir:

function onFrame(event){
    if(clearCanvas && project.activeLayer.hasChildren()){
        project.activeLayer.removeChildren();
        clearCanvas = false;
    }
}

Maintenant, chaque fois que vous définissez ClearCanvas true, il efface tous les éléments de l'écran.