OffscreenCanvas: getContext() Methode

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 OffscreenCanvas.getContext()-Methode gibt einen Zeichenkontext für eine Offscreen-Leinwand zurück oder null, wenn der Kontext-Identifikator nicht unterstützt wird oder die Offscreen-Leinwand bereits auf einen anderen Kontextmodus eingestellt wurde.

Syntax

js
getContext(contextType, contextAttributes)

Parameter

contextType

Ein String, der den Kontext-Identifikator enthält, der den Zeichenkontext der Leinwand definiert. Mögliche Werte sind:

2d

Erstellt ein OffscreenCanvasRenderingContext2D-Objekt, das einen zweidimensionalen Zeichenkontext darstellt.

webgl

Erstellt ein WebGLRenderingContext-Objekt, das einen dreidimensionalen Zeichenkontext darstellt. Dieser Kontext ist nur in Browsern verfügbar, die WebGL Version 1 (OpenGL ES 2.0) implementieren.

webgl2

Erstellt ein WebGL2RenderingContext-Objekt, das einen dreidimensionalen Zeichenkontext darstellt. Dieser Kontext ist nur in Browsern verfügbar, die WebGL Version 2 (OpenGL ES 3.0) implementieren.

"webgpu"

Erstellt ein GPUCanvasContext-Objekt, das einen dreidimensionalen Zeichenkontext für WebGPU-Render-Pipelines darstellt. Dieser Kontext ist nur in Browsern verfügbar, die die WebGPU API implementieren.

bitmaprenderer

Erstellt ein ImageBitmapRenderingContext, das nur Funktionen bietet, um den Inhalt der Leinwand mit einem gegebenen ImageBitmap zu ersetzen.

Hinweis: Die Bezeichner "experimental-webgl" oder "experimental-webgl2" werden auch in Implementierungen von WebGL verwendet. Diese Implementierungen haben die Test-Suite-Konformität noch nicht erreicht, oder die Grafiktreiber-Situation auf der Plattform ist noch nicht stabil. Die Khronos Group zertifiziert WebGL-Implementierungen nach bestimmten Konformitätsregeln.

contextAttributes

Sie können mehrere Kontexteigenschaften verwenden, wenn Sie Ihren Zeichenkontext erstellen, zum Beispiel:

js
offscreen.getContext("webgl", { antialias: false, depth: false });

2d-Kontexteigenschaften:

alpha

Ein Boolean, der anzeigt, ob die Leinwand einen Alphakanal enthält. Wenn auf false gesetzt, weiß der Browser jetzt, dass der Hintergrund immer undurchsichtig ist, was das Zeichnen von transparenten Inhalten und Bildern beschleunigen kann.

willReadFrequently

Ein Boolean, der anzeigt, ob viele Rückleseoperationen geplant sind. Dies erzwingt die Verwendung einer Software (anstatt einer hardwarebeschleunigten) 2D-Leinwand und kann Speicher sparen, wenn häufig getImageData() aufgerufen wird. In Firefox ist diese Option nur verfügbar, wenn das Flag gfx.canvas.willReadFrequently.enable auf true gesetzt ist (was standardmäßig nur für B2G/Firefox OS der Fall ist).

WebGL-Kontexteigenschaften:

alpha

Ein Boolean, der anzeigt, ob die Leinwand einen Alphapuffer enthält.

depth

Ein Boolean, der anzeigt, dass der Zeichenpuffer angefordert wird, einen Tiefenpuffer von mindestens 16 Bit zu haben.

stencil

Ein Boolean, der anzeigt, dass der Zeichenpuffer angefordert wird, einen Schablonenpuffer von mindestens 8 Bit zu haben.

antialias

Ein Boolean, der anzeigt, ob eine Kantenglättung durchgeführt werden soll, wenn möglich.

premultipliedAlpha

Ein Boolean, der anzeigt, dass der Seitenkompositor davon ausgeht, dass der Zeichenpuffer Farben mit vormultipliziertem Alpha enthält.

preserveDrawingBuffer

Wenn der Wert wahr ist, werden die Puffer nicht gelöscht und behalten ihre Werte, bis sie vom Autor gelöscht oder überschrieben werden.

failIfMajorPerformanceCaveat

Ein Boolean, der anzeigt, ob ein Kontext erstellt wird, wenn die Systemleistung gering ist.

Rückgabewert

Ein Zeichenkontext, der entweder ein

Wenn der Kontext-Identifikator nicht unterstützt wird oder die Leinwand bereits auf einen anderen Kontextmodus eingestellt wurde, wird null zurückgegeben.

Ausnahmen

InvalidStateError DOMException

Wirft eine Ausnahme, wenn die Leinwand an einen anderen Kontextbereich übertragen wurde, zum Beispiel an einen Worker.

Beispiele

js
const offscreen = new OffscreenCanvas(256, 256);
const gl = offscreen.getContext("webgl");

gl; // WebGLRenderingContext
gl.canvas; // OffscreenCanvas

Spezifikationen

Specification
HTML
# dom-offscreencanvas-getcontext-dev

Browser-Kompatibilität

Siehe auch