So löschen Sie die Leinwand zum Neuzeichnen

Nachdem ich mit zusammengesetzten Operationen experimentiert und Bilder auf die Leinwand gezeichnet habe, versuche ich nun, Bilder zu entfernen und zusammenzusetzen. Wie mache ich das?

Ich muss die Leinwand löschen, um andere Bilder neu zu zeichnen. Dies kann eine Weile dauern, daher denke ich nicht, dass das Zeichnen eines neuen Rechtecks ​​jedes Mal die effizienteste Option ist.

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

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

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

Dies ist der schnellste und aussagekräftigste Weg, um die gesamte Leinwand zu löschen.

Verwende nicht: canvas.width = canvas.width;

Durch das canvas.widthZurücksetzen wird der gesamte Canvas-Status zurückgesetzt (z. B. Transformationen, Zeilenbreite, Strichstil usw.). Dies ist sehr langsam (im Vergleich zu clearRect), funktioniert nicht in allen Browsern und beschreibt nicht, was Sie tatsächlich versuchen.

Umgang mit transformierten Koordinaten

Wenn Sie die Transformationsmatrix geändert haben (zB mit scale, rotateoder translate) , danncontext.clearRect(0,0,canvas.width,canvas.height) wird wahrscheinlich nicht den gesamten sichtbaren Teil der Leinwand löschen.

Die Lösung? Setzen Sie die Transformationsmatrix zurück, bevor Sie die Zeichenfläche löschen:

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

Bearbeiten: Ich habe gerade ein Profil erstellt und (in Chrome) ist es ungefähr 10% schneller, eine Leinwand im Format 300 x 150 (Standardgröße) zu löschen, ohne die Transformation zurückzusetzen. Mit zunehmender Größe Ihrer Leinwand nimmt dieser Unterschied ab.

Das ist bereits relativ unbedeutend, aber in den meisten Fällen zeichnen Sie erheblich mehr als Sie löschen, und ich halte diesen Leistungsunterschied für irrelevant.

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

Wenn Sie Linien zeichnen, vergessen Sie nicht:

context.beginPath();

Andernfalls werden die Zeilen nicht gelöscht.

Andere haben die Frage bereits hervorragend beantwortet, aber wenn eine einfache clear()Methode für das Kontextobjekt für Sie nützlich wäre (für mich), ist dies die Implementierung, die ich basierend auf den Antworten hier verwende:

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

Verwendungszweck:

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

• Chrome reagiert gut auf: context.clearRect ( x , y , w , h );wie von @ Pentium10 vorgeschlagen, aber IE9 scheint diese Anweisung vollständig zu ignorieren.
• IE9 scheint zu reagieren: canvas.width = canvas.width;Es werden jedoch keine Linien, sondern nur Formen, Bilder und andere Objekte gelöscht, es sei denn, Sie verwenden auch die Lösung von @John Allsopp, bei der zuerst die Breite geändert wird.

Wenn Sie also eine Leinwand und einen Kontext wie folgt erstellt haben:

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

Sie können eine Methode wie die folgende verwenden:

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

Dies ist 2018 und es gibt noch keine native Methode, um die Leinwand für das Neuzeichnen vollständig zu löschen. clearRect() nicht die Leinwand ganz klar. Nicht ausgefüllte Zeichnungen werden nicht gelöscht (z. B. rect())

1.Um die Leinwand vollständig zu löschen, unabhängig davon, wie Sie zeichnen:

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

Vorteile: Erhält StrokeStyle, FillStyle usw.; Keine Verzögerung;

Nachteile: Unnötig, wenn Sie beginPath bereits verwenden, bevor Sie etwas zeichnen

2.Verwenden Sie den Breite / Höhe-Hack:

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

ODER

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

Vorteile: Funktioniert mit IE Nachteile: Setzt stroSStyle, fillStyle auf schwarz zurück; Laggy;

Ich habe mich gefragt, warum es keine native Lösung gibt. Wird tatsächlich clearRect()als einzeilige Lösung betrachtet, da die meisten Benutzer dies tun, beginPath()bevor sie einen neuen Pfad zeichnen. Obwohl beginPath nur zum Zeichnen von Linien und nicht für geschlossene Pfade verwendet werden darfrect().

Dies ist der Grund, warum die akzeptierte Antwort mein Problem nicht löste und ich Stunden damit verschwendete, verschiedene Hacks auszuprobieren. Verfluche dich Mozilla

Verwenden Sie die clearRect-Methode, indem Sie x-, y-Koordinaten sowie Höhe und Breite der Leinwand übergeben. ClearRect löscht die gesamte Leinwand wie folgt:

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

Hier gibt es eine Menge guter Antworten. Eine weitere Anmerkung ist, dass es manchmal Spaß macht, die Leinwand nur teilweise zu räumen. Das heißt, das vorherige Bild wird "ausgeblendet", anstatt es vollständig zu löschen. Dies kann schöne Trails-Effekte ergeben.

es ist einfach. Angenommen, Ihre Hintergrundfarbe ist weiß:

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

Ein schneller Weg ist zu tun

canvas.width = canvas.width

Idk wie es funktioniert, aber es funktioniert!

Dies ist, was ich benutze, unabhängig von Grenzen und Matrixtransformationen:

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

Grundsätzlich wird der aktuelle Status des Kontexts gespeichert und ein transparentes Pixel mit copyas gezeichnet globalCompositeOperation. Stellt dann den vorherigen Kontextstatus wieder her.

Dies funktionierte für mein pieChart in 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

Ich habe festgestellt, dass in allen Browsern, die ich teste, der schnellste Weg darin besteht, Rect tatsächlich mit Weiß oder einer beliebigen Farbe zu füllen. Ich habe einen sehr großen Monitor und im Vollbildmodus ist clearRect quälend langsam, aber fillRect ist vernünftig.

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

Der Nachteil ist, dass die Leinwand nicht mehr transparent ist.

Im Webkit müssen Sie die Breite auf einen anderen Wert einstellen, dann können Sie sie auf den Anfangswert zurücksetzen

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

Eine einfache, aber nicht sehr lesbare Möglichkeit besteht darin, Folgendes zu schreiben:

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

// after doing some rendering

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

Ich benutze immer

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

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

Füllen Sie das angegebene Rechteck mit RGBA-Werten:
0 0 0 0: mit Chrome
0 0 0 255: mit FF & Safari

Aber

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

Lass das Rechteck mit
0 0 0 255 gefüllt sein,
egal welcher Browser!

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

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

der kürzeste Weg:

canvas.width += 0

schnellste Weg:

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

Wenn Sie clearRect nur verwenden und es in einem Formular zum Senden Ihrer Zeichnung haben, erhalten Sie stattdessen das Senden der Löschung, oder es kann zuerst gelöscht und dann eine leere Zeichnung hochgeladen werden, sodass Sie eine hinzufügen müssen PreventDefault zu Beginn der Funktion:

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

Hoffe es hilft jemandem.

Ich benutze das immer

ctx.clearRect(0, 0, canvas.width, canvas.height)
window.requestAnimationFrame(functionToBeCalled)

HINWEIS

Die Kombination von clearRect und requestAnimationFrame ermöglicht eine flüssigere Animation, wenn Sie dies wünschen

Dies sind alles gute Beispiele dafür, wie Sie eine Standard-Leinwand löschen. Wenn Sie jedoch paperjs verwenden, funktioniert dies:

Definieren Sie eine globale Variable in JavaScript:

var clearCanvas = false;

Definieren Sie in Ihrem PaperScript:

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

Wo immer Sie clearCanvas auf true setzen, werden alle Elemente vom Bildschirm gelöscht.