Wie die Leinwand für Nachzug löschen

Question

Nach dem mit Verbundoperationen zu experimentieren und Zeichnen von Bildern auf der Leinwand ich jetzt versuchen, Bilder zu entfernen und Compositing. Wie kann ich das tun?

Ich brauche für die Wiederherstellung andere Bilder der Leinwand zu löschen; Dies kann für eine Weile weitergehen, so glaube ich nicht ein neues Rechteck jedes Mal zeichnen die effizienteste Option sein.

Answer 1

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

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

Answer 2

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

Dies ist die schnellste und beschreibende Art und Weise die gesamte Leinwand zu löschen.

Verwenden Sie nicht: canvas.width = canvas.width;

canvas.width Zurücksetzen setzt alle Leinen (zB Transformationen, linewidth, stroke, etc.), ist es sehr langsam ist (im Vergleich zu clearRect), es funktioniert nicht in allen Browsern, und es beschreibt nicht, was Sie sind eigentlich versuchen zu tun.

Der Umgang mit transformierten Koordinaten

Wenn Sie die Transformations-Matrix geändert haben (zum Beispiel unter Verwendung von scale, rotate oder translate), dann wird context.clearRect(0,0,canvas.width,canvas.height) wahrscheinlich nicht den gesamten sichtbaren Teil der Leinwand klar.

Die Lösung? Setzen Sie die Transformations-Matrix vor Löschen der Leinwand:

// 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: Ich habe gerade eine Profilierung und (in Chrome) getan, um es etwa 10% schneller eine 300x150 (Standardgröße) Leinwand zu löschen, ohne das Zurücksetzen der Transformation. Da die Größe der Leinwand erhöht diese Differenz Tropfen.

Das ist schon relativ unbedeutend, aber in den meisten Fällen werden Sie wesentlich mehr zeichnen werden, als Sie das Clearing und ich glaube, der Performance-Unterschied irrelevant sein.

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

Answer 3

Wenn Sie Linien zeichnen, stellen Sie sicher, nicht vergessen:

context.beginPath();

Ansonsten sind die Linien nicht gelöscht bekommen.

Answer 4

Andere haben bereits eine ausgezeichnete Arbeit der Beantwortung die Frage gemacht, aber wenn eine einfache clear() Methode auf dem Kontextobjekt Sie sei nützlich (es war für mich), ist dies die Implementierung ich auf Antworten basieren verwende hier:

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

Verbrauch:

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 reagiert gut auf. context.clearRect ( x , y , w , h ); wie von @ Pentium10 aber IE9 scheint völlig gegen diese Anweisung zu ignorieren
• IE9 scheint zu reagieren. canvas.width = canvas.width; aber es funktioniert nicht klare Linien, gerade Formen, Bilder und andere Objekte, wenn Sie auch @John Allsopp Lösung von erster Änderung der Breite verwenden

Also, wenn Sie eine Leinwand und Kontext wie folgt erstellt:

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

Sie können eine Methode wie diese verwenden:

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

Answer 6

Verwendung clearRect Verfahren durch x, y-Koordinaten und die Höhe und Breite der Leinwand vorbei. ClearRect löscht ganze Leinwand wie:

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

Answer 7

Dies ist 2018 und immer noch gibt es keine native Methode vollständig klar Leinwand für neu gezeichnet werden. clearRect() nicht vollständig die Leinwand löschen. Nicht-Fülltyp Zeichnungen werden nicht gelöscht (zB. rect())

1.To vollständig klare Leinwand unabhängig davon, wie Sie ziehen:

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

Pros: Konfitüren stroke, fillStyle etc .; Keine Verzögerung;

Nachteile: Unnötige, wenn Sie bereits beginPath verwenden, bevor irgendetwas Zeichnung

2.Using die Breite / Höhe Hack:

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

oder

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

Vorteile: Funktioniert mit IE Nachteile: Resets stroke, fillStyle bis schwarz; Laggy;

Ich habe mich gefragt, warum eine native Lösung gibt es nicht. Eigentlich ist clearRect() als einzige Linie Lösung angesehen, da die meisten Benutzer vor beginPath() Sie keinen neuen Pfad zeichnen. Obwohl beginPath ist nur zum Einsatz, während die Linien und nicht geschlossenen Pfad wie rect(). Zeichnung

Dies ist der Grund, warum die akzeptierte Antwort nicht mein Problem lösen und ich landete verschwenden Stunden verschiedene Hacks versuchen. Verfluchen Sie mozilla

Answer 8

gibt es eine Tonne gute Antworten hier. eine weitere Anmerkung ist, dass es Spaß manchmal nur teilweise die Leinwand zu löschen. das heißt, „fade out“ das vorherige Bild, anstatt sie vollständig zu löschen. Dies kann schöne Wanderwege Effekte geben.

es ist einfach. Ihre Hintergrundfarbe angenommen 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);

Answer 9

Eine schnelle Art und Weise zu tun,

canvas.width = canvas.width

Idk, wie es funktioniert, aber es funktioniert!

Answer 10

in webkit Sie die Breite auf einen anderen Wert festlegen müssen, dann können Sie es wieder auf den Anfangswert gesetzt

Answer 11

Ich habe festgestellt, dass in allen Browsern I-Test, ist der schnellste Weg, um tatsächlich fillRect mit weißer oder whataever Farbe Sie möchten. Ich habe einen sehr großen Bildschirm und im Vollbildmodus die clearRect ist quälend langsam, aber die fillRect angemessen ist.

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

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

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

Das funktioniert für meine 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

Answer 14

Das ist, was ich benutze, egal 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 speichert es den aktuellen Status des Kontextes, und zeichnet ein transparentes Pixel mit copy wie globalCompositeOperation . Dann stellt den vorherigen Kontextzustand.

Answer 15

Eine einfache, aber nicht sehr gut lesbar Weg, dies zu schreiben:

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

// after doing some rendering

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

Answer 16

ich immer verwenden

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

Answer 17

schnellster 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

Answer 18

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

füllen das angegebene Rechteck mit RGBA-Werte:
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);  

Lassen Sie das Rechteck mit
gefüllt 0 0 0 255
Ganz gleich, um den Browser!

Answer 19

Wenn Sie clearRect nur verwenden, wenn Sie es in einer Form haben Ihre Zeichnung einreichen, werden Sie ein, anstatt die Clearing erhalten einreichen, oder vielleicht kann es zuerst gelöscht und dann eine Leere Zeichnung laden, so dass Sie benötigen eine prevent sich am Anfang der Funktion hinzuzufügen:

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

Hope es hilft jemand.

Answer 20

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

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

Answer 21

Dies alles sind gute Beispiele dafür, wie Sie eine Standard-Leinwand klar, aber wenn Sie paperjs verwenden, dann wird diese Arbeit:

Definieren Sie eine globale Variable in JavaScript:

var clearCanvas = false;

Von Ihrem PaperScript definieren:

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

Jetzt, wo Sie clearCanvas auf true gesetzt, werden alle Elemente aus dem Bildschirm löschen.