OffscreenCanvasRenderingContext2D

Baseline 2023 *
Newly available

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

* Some parts of this feature may have varying levels of support.

Hinweis: Diese Funktion ist in Web Workers verfügbar.

Die OffscreenCanvasRenderingContext2D-Schnittstelle ist ein CanvasRenderingContext2D-Rendering-Kontext zum Zeichnen auf die Bitmap eines OffscreenCanvas-Objekts. Sie ähnelt dem CanvasRenderingContext2D-Objekt mit den folgenden Unterschieden:

  • es gibt keine Unterstützung für Benutzeroberflächenfunktionen (drawFocusIfNeeded)
  • das canvas-Attribut verweist auf ein OffscreenCanvas-Objekt anstelle eines <canvas>-Elements
  • die Bitmap des Platzhalter-<canvas>-Elements, das zum OffscreenCanvas-Objekt gehört, wird während des Rendering-Updates des Window oder Worker, das den OffscreenCanvas besitzt, aktualisiert

Beispiel

Der folgende Codeausschnitt erstellt ein Worker-Objekt unter Verwendung des Worker()-Konstruktors. Die Methode transferControlToOffscreen() wird verwendet, um ein OffscreenCanvas-Objekt aus dem <canvas>-Element zu erhalten, sodass es an den Worker übertragen werden kann:

js
const canvas = document.getElementById("canvas");
const offscreen = canvas.transferControlToOffscreen();
const worker = new Worker("worker.js");
worker.postMessage({ canvas: offscreen }, [offscreen]);

Im Worker-Thread können wir die OffscreenCanvasRenderingContext2D verwenden, um auf die Bitmap des OffscreenCanvas-Objekts zu zeichnen:

js
onmessage = (event) => {
  const canvas = event.data.canvas;
  const offCtx = canvas.getContext("2d");
  // draw to the offscreen canvas context
  offCtx.fillStyle = "red";
  offCtx.fillRect(0, 0, 100, 100);
};

Ein vollständiges Beispiel finden Sie in unserem OffscreenCanvas Worker-Beispiel (OffscreenCanvas Worker ausführen).

Zusätzliche Methoden

Die folgende Methode ist neu in der Schnittstelle OffscreenCanvasRenderingContext2D und existiert nicht in der Schnittstelle CanvasRenderingContext2D:

commit()

Überträgt das gerenderte Bild auf das Platzhalter-<canvas>-Element des OffscreenCanvas-Objekts.

Nicht unterstützte Funktionen

Die folgende Benutzeroberflächenmethode wird von der Schnittstelle OffscreenCanvasRenderingContext2D nicht unterstützt:

CanvasRenderingContext2D.drawFocusIfNeeded()

Wenn ein bestimmtes Element fokussiert ist, zeichnet diese Methode einen Fokusrahmen um den aktuellen Pfad.

Geerbte Eigenschaften und Methoden

Die folgenden Eigenschaften und Methoden werden von CanvasRenderingContext2D geerbt. Sie haben die gleiche Verwendung wie in CanvasRenderingContext2D.

Kontext

CanvasRenderingContext2D.isContextLost()

Gibt true zurück, wenn der Rendering-Kontext verloren gegangen ist.

Rechtecke zeichnen

CanvasRenderingContext2D.clearRect()

Setzt alle Pixel im durch den Ausgangspunkt (x, y) und die Größe (width, height) definierten Rechteck auf transparentes Schwarz und löscht dabei alle zuvor gezeichneten Inhalte.

CanvasRenderingContext2D.fillRect()

Zeichnet ein gefülltes Rechteck an der Position (x, y) mit einer durch width und height bestimmten Größe.

CanvasRenderingContext2D.strokeRect()

Zeichnet ein Rechteck, das einen Ausgangspunkt bei (x, y) hat und eine Breite w sowie eine Höhe h aufweist, auf den Canvas unter Verwendung des aktuellen Strichstils.

Text zeichnen

Die folgenden Methoden und Eigenschaften steuern das Zeichnen von Text. Siehe auch das TextMetrics-Objekt für Texteigenschaften.

CanvasRenderingContext2D.fillText()

Zeichnet (füllt) einen angegebenen Text an der angegebenen Position (x, y).

CanvasRenderingContext2D.strokeText()

Zeichnet (strichelt) einen angegebenen Text an der angegebenen Position (x, y).

CanvasRenderingContext2D.measureText()

Gibt ein TextMetrics-Objekt zurück.

CanvasRenderingContext2D.textRendering

Textrendering. Mögliche Werte: auto (Standard), optimizeSpeed, optimizeLegibility.

[...]

Spezifikationen

Specification
HTML
# the-offscreen-2d-rendering-context

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch