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 einOffscreenCanvas
-Objekt anstelle eines<canvas>
-Elements - die Bitmap des Platzhalter-
<canvas>
-Elements, das zumOffscreenCanvas
-Objekt gehört, wird während des Rendering-Updates desWindow
oderWorker
, das denOffscreenCanvas
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:
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:
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
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