Leinwand in JavaScript löschen

Das HTML-Element <canvas> ist eine Bitmap, auf der Sie mit JavaScript zeichnen. Wann immer Sie einen Frame neu zeichnen, eine Zeichnung zurücksetzen oder einen Benutzer seine Arbeit wegwischen lassen, müssen Sie einen Teil oder die gesamte Bitmap freimachen. Dieser Artikel zeigt, wie Sie eine Leinwand in JavaScript mit clearRect() löschen – einschließlich des Leerens der ganzen Fläche, der Verknüpfung des Aufrufs mit einer Schaltfläche und des Entfernens nur eines Bereichs.

Die gesamte Leinwand mit clearRect() löschen

clearRect() ist eine Methode des 2D-Rendering-Kontexts (CanvasRenderingContext2D), nicht des <canvas>-Elements selbst. Sie rufen sie auf dem Kontextobjekt auf, das canvas.getContext('2d') zurückgibt. Sie nimmt vier Argumente entgegen – die x- und y-Koordinaten der oberen linken Ecke des Rechtecks sowie dessen width und height – und löscht jedes Pixel innerhalb dieses Rechtecks, sodass es vollständig transparent wird.

Um die gesamte Leinwand zu löschen, übergeben Sie ein Rechteck, das die komplette Bitmap abdeckt:

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

Dabei sind canvas.width und canvas.height die eigenen width- und height-Attribute des Canvas-Elements – seine Bitmap-Abmessungen in Pixeln. Da das Rechteck am Ursprung beginnt und die gesamte Bitmap umfasst, entfernt clearRect() alles zuvor Gezeichnete. Führen Sie dieses Beispiel aus, um den Aufruf zu sehen, der eine 680-mal-420-Bitmap löscht:

Der Code und die angezeigten Bezeichnungen oder Ausgaben in diesem Abschnitt bleiben auf Englisch.

const canvas = { width: 680, height: 420 };
console.log(`context.clearRect(0, 0, ${canvas.width}, ${canvas.height})`);

context.clearRect(0, 0, 680, 420)

Eine Leinwand erstellen und darauf zeichnen

Ein <canvas>-Element ist nur ein Container; das Zeichnen übernimmt JavaScript über das Kontextobjekt. Das folgende Beispiel erstellt eine 680-mal-420-Leinwand und zeichnet eine rote Kurve darauf, damit sichtbarer Inhalt zum Löschen vorhanden ist. Speichern Sie es als .html-Datei und öffnen Sie es in einem Browser – die Seitenbeispiele in diesem Artikel laufen in einem Browser und werden nicht in der Testumgebung dieses Artikels ausgeführt.

Der Code und die angezeigten Bezeichnungen oder Ausgaben in diesem Abschnitt bleiben auf Englisch.

<!DOCTYPE HTML>
<html>
  <head>
    <title>Creating a canvas</title>
  </head>
  <body>
    <canvas id="canvsId" width="680" height="420"></canvas>
    <script>
      let canvas = document.getElementById('canvsId');
      let context = canvas.getContext('2d');
      context.beginPath();
      context.moveTo(180, 90);
      context.bezierCurveTo(120, 80, 110, 170, 250, 170);
      context.bezierCurveTo(260, 190, 300, 160, 370, 140);
      context.bezierCurveTo(410, 140, 440, 130, 380, 110);
      context.bezierCurveTo(440, 50, 350, 40, 350, 50);
      context.bezierCurveTo(310, 10, 270, 30, 240, 40);
      context.bezierCurveTo(310, 10, 130, 15, 180, 90);
      context.closePath();
      context.lineWidth = 8;
      context.strokeStyle = 'red';
      context.stroke();
    </script>
  </body>
</html>

Die gerenderte Seite zeigt die rote Kontur auf der Leinwand:

Die Leinwand mit einer Schaltfläche löschen

Damit der Benutzer das Löschen auslösen kann, hängen Sie einen Klick-Handler an eine Schaltfläche und rufen clearRect() darin auf. Die folgende Seite verwendet dieselbe Zeichnung, fügt eine Eingabeschaltfläche mit der ID clear hinzu und registriert einen Listener, der bei jedem Klick die gesamte Bitmap löscht.

Der Code und die angezeigten Bezeichnungen oder Ausgaben in diesem Abschnitt bleiben auf Englisch.

<!DOCTYPE HTML>
<html>
  <head>
    <title>Clear a canvas with a button</title>
    <style>
      #button {
        position: absolute;
        top: 5px;
        left: 10px;
      }
      #button input {
        padding: 10px;
        display: block;
        margin-top: 5px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvs" width="680" height="420"></canvas>
    <div id="button">
      <input type="button" id="clear" value="Clear">
    </div>
    <script>
      let canvas = document.getElementById('myCanvs');
      let context = canvas.getContext('2d');
      context.beginPath();
      context.moveTo(180, 90);
      context.bezierCurveTo(120, 80, 110, 170, 250, 170);
      context.bezierCurveTo(260, 190, 300, 160, 370, 140);
      context.bezierCurveTo(410, 140, 440, 130, 380, 110);
      context.bezierCurveTo(440, 50, 350, 40, 350, 50);
      context.bezierCurveTo(310, 10, 270, 30, 240, 40);
      context.bezierCurveTo(310, 10, 130, 15, 180, 90);
      context.closePath();
      context.lineWidth = 8;
      context.strokeStyle = 'red';
      context.stroke();
      document.getElementById('clear').addEventListener('click', function() {
        context.clearRect(0, 0, canvas.width, canvas.height);
      }, false);
    </script>
  </body>
</html>

Öffnen Sie die Seite, und die Schaltfläche erscheint oberhalb der Leinwand:

Nach dem Klick entfernt clearRect(0, 0, canvas.width, canvas.height) jedes gezeichnete Pixel. Die Leinwand wird transparent, sodass die dahinterliegende Seite dort durchscheint, wo sich die Zeichnung befand:

Einen Teil der Leinwand löschen und häufige Fehler vermeiden

clearRect() löscht ein Rechteck, nicht unbedingt die gesamte Leinwand. Um nur einen Teil einer Zeichnung zu entfernen, übergeben Sie die Koordinaten und die Größe dieses Bereichs – zum Beispiel löscht context.clearRect(180, 90, 200, 80) ein 200-mal-80-Pixel-Feld ab (180, 90). Pixel innerhalb des Rechtecks werden transparent, während der Rest der Zeichnung intakt bleibt – nützlich, um ein bewegtes Objekt oder ein einzelnes Panel neu zu zeichnen.

Einige Details sorgen häufig für Verwirrung:

• canvas.width und canvas.height sind die Pixelabmessungen der Bitmap, festgelegt durch die Attribute des Elements oder durch JavaScript. Die CSS-Eigenschaften width und height skalieren nur die Darstellung der Leinwand; sie ändern die Bitmap nicht und sind daher die falschen Werte für clearRect(). Eine per CSS gestreckte Leinwand sieht auf der Seite größer aus, behält aber dieselbe zeichenbare Fläche.
• clearRect() folgt der aktuellen Transformation. Wenn Sie translate(), rotate() oder scale() aufgerufen haben, wird auch das übergebene Rechteck transformiert. Rufen Sie zuerst context.setTransform(1, 0, 0, 1, 0, 0) auf, wenn Sie in rohen Bitmap-Koordinaten löschen möchten. Ein aktiver Clipping-Bereich kann ebenfalls einschränken, welche Pixel gelöscht werden.
• Das Löschen stellt transparente Pixel wieder her, statt weiß zu malen; alles hinter der Leinwand – ein Seitenhintergrund oder gestapelte Elemente – wird im gelöschten Bereich wieder sichtbar.
• Die 2D-Canvas-API, einschließlich clearRect(), funktioniert in allen modernen Browsern, aber sehr alte Browser unterstützen <canvas> möglicherweise gar nicht – verlassen Sie sich bei älteren Zielumgebungen also nicht auf universelle Verfügbarkeit.