CanvasRenderingContext2D: reset() Methode

Baseline 2023

Newly available

Since ⁨December 2023⁩, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Die CanvasRenderingContext2D.reset()-Methode der Canvas 2D-API setzt den Rendering-Kontext in seinen Standardzustand zurück, sodass er für das Zeichnen anderer Inhalte wiederverwendet werden kann, ohne dass alle Eigenschaften explizit zurückgesetzt werden müssen.

Das Zurücksetzen löscht den Puffer im Hintergrund, den Zeichenstatus-Stack, alle definierten Pfade und Stile. Dazu gehört die aktuelle Transformation Matrize, Kompositions- Eigenschaften, der Clipping-Bereich, die Strichliste, Linienstile, Textstile, Schatten, Bildglättung, Filter und so weiter.

Syntax

reset()

Parameter

Keine.

Rückgabewert

Keiner (undefined).

Beispiele

Dieses Beispiel zeigt, wie wir reset() verwenden können, um den Kontext vollständig zu löschen, bevor wir erneut zeichnen.

Zuerst definieren wir eine Schaltfläche und ein Canvas.

css

#toggle-reset {
  display: block;
}

html

<button id="toggle-reset">Toggle</button>
<canvas id="my-house" width="500" height="200"></canvas>

Der Code ruft zuerst einen 2d-Kontext für das Canvas ab. Anschließend werden Funktionen definiert, die den Kontext verwenden können, um ein Rechteck bzw. einen Kreis zu zeichnen.

// Get the 2d context
const canvas = document.getElementById("my-house");
const ctx = canvas.getContext("2d");

function drawRect() {
  // Set line width
  ctx.lineWidth = 10;

  // Stroke rect outline
  ctx.strokeRect(50, 50, 150, 100);

  // Create filled text
  ctx.font = "50px serif";
  ctx.fillText("Rect!", 70, 110);
}

function drawCircle() {
  // Set line width
  ctx.lineWidth = 5;

  // Stroke out circle
  ctx.beginPath();
  ctx.arc(300, 100, 50, 0, 2 * Math.PI);
  ctx.stroke();

  // Create filled text
  ctx.font = "25px sans-serif";
  ctx.fillText("Circle!", 265, 100);
}

Wir zeichnen dann das Rechteck mit seiner Funktion. Die Schaltfläche schaltet das Zeichnen des Kreises und des Rechtecks um. Beachten Sie, wie reset() vor dem Zeichnen aufgerufen wird, um den Kontext zu löschen.

drawRect();

// Toggle between circle and rectangle using button
let toggle = true;
const myButton = document.getElementById("toggle-reset");

myButton.addEventListener("click", () => {
  ctx.reset(); // Clear the context!
  if (toggle) {
    drawCircle();
  } else {
    drawRect();
  }
  toggle = !toggle;
});

Das Ergebnis sieht so aus:

Spezifikationen

Specification
HTML # dom-context-2d-reset

Browser-Kompatibilität

Siehe auch

Die Schnittstelle, die diese Methode definiert: CanvasRenderingContext2D

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden