OffscreenCanvasRenderingContext2D

Baseline

Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit März 2023 browserübergreifend verfügbar.

* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.

Vollständige Kompatibilität anzeigen
Mehr erfahren

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

Die Schnittstelle OffscreenCanvasRenderingContext2D ist ein CanvasRenderingContext2D-Rendering-Kontext zum Zeichnen auf der Bitmap eines OffscreenCanvas-Objekts. Sie ähnelt dem CanvasRenderingContext2D-Objekt, weist jedoch folgende Unterschiede auf:

Funktionen für die Benutzeroberfläche (drawFocusIfNeeded) werden nicht unterstützt.
Ihr canvas-Attribut verweist auf ein OffscreenCanvas-Objekt statt auf ein <canvas>-Element.
Die Bitmap des Platzhalter-<canvas>-Elements, das zum OffscreenCanvas-Objekt gehört, wird bei der Rendering-Aktualisierung des Window oder Worker aktualisiert, dem das OffscreenCanvas gehört.

Beispiel

Der folgende Codeausschnitt erstellt mit dem Konstruktor Worker() ein Worker-Objekt. Mit der Methode transferControlToOffscreen() wird aus dem <canvas>-Element ein OffscreenCanvas-Objekt abgerufen, damit 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 mit OffscreenCanvasRenderingContext2D auf die Bitmap des OffscreenCanvas-Objekts 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

Die folgende Methode gehört zur Schnittstelle OffscreenCanvasRenderingContext2D und ist in der Schnittstelle CanvasRenderingContext2D nicht vorhanden:

commit(): Überträgt das gerenderte Bild an das Platzhalter-<canvas>-Element des OffscreenCanvas-Objekts des Kontexts.

Nicht unterstützte Funktionen

Die folgende Methode für die Benutzeroberfläche wird von der Schnittstelle OffscreenCanvasRenderingContext2D nicht unterstützt:

CanvasRenderingContext2D.drawFocusIfNeeded(): Wenn ein bestimmtes Element fokussiert ist, zeichnet diese Methode einen Fokusring um den aktuellen Pfad.

Geerbte Eigenschaften und Methoden

Die folgenden Eigenschaften und Methoden werden von CanvasRenderingContext2D geerbt. Sie werden genauso verwendet wie in CanvasRenderingContext2D.

Kontext

CanvasRenderingContext2D.getContextAttributes(): Gibt ein Objekt mit den tatsächlichen Kontextattributen zurück. Kontextattribute können mit OffscreenCanvas.getContext() angefordert werden.
CanvasRenderingContext2D.isContextLost(): Gibt true zurück, wenn der Rendering-Kontext verloren gegangen ist.

Rechtecke zeichnen

CanvasRenderingContext2D.clearRect(): Setzt alle Pixel im Rechteck, das durch den Startpunkt (x, y) und die Größe (width, height) definiert ist, auf transparentes Schwarz und löscht damit zuvor gezeichnete Inhalte.
CanvasRenderingContext2D.fillRect(): Zeichnet ein ausgefülltes Rechteck an der Position (x, y), dessen Größe durch width und height bestimmt wird.
CanvasRenderingContext2D.strokeRect(): Zeichnet mit dem aktuellen Konturstil ein Rechteck auf den Canvas, dessen Startpunkt bei (x, y) liegt und das eine Breite von w und eine Höhe von h hat.

Text zeichnen

Die folgenden Methoden und Eigenschaften steuern das Zeichnen von Text. Informationen zu Texteigenschaften finden Sie auch beim Objekt TextMetrics.

CanvasRenderingContext2D.fillText(): Zeichnet (füllt) einen bestimmten Text an der angegebenen Position (x, y).
CanvasRenderingContext2D.strokeText(): Zeichnet die Kontur eines bestimmten Texts an der angegebenen Position (x, y).
CanvasRenderingContext2D.measureText(): Gibt ein TextMetrics-Objekt zurück.
CanvasRenderingContext2D.textRendering: Text-Rendering. Mögliche Werte: auto (Standard), optimizeSpeed, optimizeLegibility,

Linienstile

Die folgenden Methoden und Eigenschaften steuern, wie Linien gezeichnet werden.

CanvasRenderingContext2D.lineWidth: Breite der Linien. Standardwert: 1.0.
CanvasRenderingContext2D.lineCap: Art der Linienenden. Mögliche Werte: butt (Standard), round, square.
CanvasRenderingContext2D.lineJoin: Legt die Art der Ecken fest, an denen zwei Linien aufeinandertreffen. Mögliche Werte: round, bevel, miter (Standard).
CanvasRenderingContext2D.miterLimit: Verhältnis für die Gehrungsgrenze. Standardwert: 10.
CanvasRenderingContext2D.getLineDash(): Gibt das aktuelle Strichmuster-Array zurück, das eine gerade Anzahl nicht negativer Zahlen enthält.
CanvasRenderingContext2D.setLineDash(): Legt das aktuelle Strichmuster fest.
CanvasRenderingContext2D.lineDashOffset: Gibt an, wo ein Strichmuster auf einer Linie beginnt.

Textstile

Die folgenden Eigenschaften steuern das Layout von Text.

CanvasRenderingContext2D.font: Schrifteinstellung. Standardwert: 10px sans-serif.
CanvasRenderingContext2D.textAlign: Einstellung für die Textausrichtung. Mögliche Werte: start (Standard), end, left, right, center.
CanvasRenderingContext2D.textBaseline: Einstellung für die Ausrichtung an der Grundlinie. Mögliche Werte: top, hanging, middle, alphabetic (Standard), ideographic, bottom.
CanvasRenderingContext2D.direction: Schreibrichtung. Mögliche Werte: ltr, rtl, inherit (Standard).
CanvasRenderingContext2D.letterSpacing: Buchstabenabstand. Standardwert: 0px.
CanvasRenderingContext2D.fontKerning: Kerning der Schrift. Mögliche Werte: auto (Standard), normal, none.
CanvasRenderingContext2D.fontStretch: Schriftbreite. Mögliche Werte: ultra-condensed, extra-condensed, condensed, semi-condensed, normal (Standard), semi-expanded, expanded, extra-expanded, ultra-expanded.
CanvasRenderingContext2D.fontVariantCaps: Variante der Großbuchstaben einer Schrift. Mögliche Werte: normal (Standard), small-caps, all-small-caps, petite-caps, all-petite-caps, unicase, titling-caps.
CanvasRenderingContext2D.textRendering: Text-Rendering. Mögliche Werte: auto (Standard), optimizeSpeed, optimizeLegibility, geometricPrecision.
CanvasRenderingContext2D.wordSpacing: Wortabstand. Standardwert: 0px
CanvasRenderingContext2D.lang: Ruft die Sprache des Canvas-Zeichenkontexts ab oder legt sie fest.

Füll- und Konturstile

Der Füllstil wird für Farben und Stile innerhalb von Formen verwendet, der Konturstil für die Linien um Formen.

CanvasRenderingContext2D.fillStyle: Farbe oder Stil für das Innere von Formen. Standardwert: black.
CanvasRenderingContext2D.strokeStyle: Farbe oder Stil für die Linien um Formen. Standardwert: black.

Farbverläufe und Muster

CanvasRenderingContext2D.createConicGradient(): Erstellt einen konischen Farbverlauf um einen Punkt, dessen Koordinaten durch die Parameter angegeben werden.
CanvasRenderingContext2D.createLinearGradient(): Erstellt einen linearen Farbverlauf entlang der Linie, deren Koordinaten durch die Parameter angegeben werden.
CanvasRenderingContext2D.createRadialGradient(): Erstellt einen radialen Farbverlauf anhand der Koordinaten der beiden Kreise, die durch die Parameter angegeben werden.
CanvasRenderingContext2D.createPattern(): Erstellt ein Muster aus dem angegebenen Bild. Die Quelle wird in den Richtungen wiederholt, die durch das Wiederholungsargument angegeben werden. Diese Methode gibt ein CanvasPattern zurück.

Schatten

CanvasRenderingContext2D.shadowBlur: Legt den Weichzeichnungseffekt fest. Standardwert: 0.
CanvasRenderingContext2D.shadowColor: Farbe des Schattens. Standardwert: vollständig transparentes Schwarz.
CanvasRenderingContext2D.shadowOffsetX: Horizontaler Versatz des Schattens. Standardwert: 0.
CanvasRenderingContext2D.shadowOffsetY: Vertikaler Versatz des Schattens. Standardwert: 0.

Pfade

Mit den folgenden Methoden lassen sich die Pfade von Objekten bearbeiten.

CanvasRenderingContext2D.beginPath(): Beginnt einen neuen Pfad, indem die Liste der Teilpfade geleert wird. Rufen Sie diese Methode auf, wenn Sie einen neuen Pfad erstellen möchten.
CanvasRenderingContext2D.closePath(): Bewegt den Zeichenstift zurück zum Anfang des aktuellen Teilpfads. Dabei wird versucht, vom aktuellen Punkt eine gerade Linie zum Anfang zu zeichnen. Wenn die Form bereits geschlossen ist oder nur einen Punkt hat, bewirkt diese Funktion nichts.
CanvasRenderingContext2D.moveTo(): Verschiebt den Startpunkt eines neuen Teilpfads zu den Koordinaten (x, y).
CanvasRenderingContext2D.lineTo(): Verbindet den letzten Punkt des aktuellen Teilpfads durch eine gerade Linie mit den angegebenen Koordinaten (x, y).
CanvasRenderingContext2D.bezierCurveTo(): Fügt dem aktuellen Pfad eine kubische Bézierkurve hinzu.
CanvasRenderingContext2D.quadraticCurveTo(): Fügt dem aktuellen Pfad eine quadratische Bézierkurve hinzu.
CanvasRenderingContext2D.arc(): Fügt dem aktuellen Pfad einen Kreisbogen hinzu.
CanvasRenderingContext2D.arcTo(): Fügt dem aktuellen Pfad einen Bogen mit den angegebenen Kontrollpunkten und dem angegebenen Radius hinzu, der durch eine gerade Linie mit dem vorherigen Punkt verbunden wird.
CanvasRenderingContext2D.ellipse(): Fügt dem aktuellen Pfad einen elliptischen Bogen hinzu.
CanvasRenderingContext2D.rect(): Erstellt einen Pfad für ein Rechteck an der Position (x, y), dessen Größe durch width und height bestimmt wird.
CanvasRenderingContext2D.roundRect(): Erstellt einen Pfad für ein Rechteck mit abgerundeten Ecken an der Position (x, y). Seine Größe wird durch width und height und die Eckenradien durch radii bestimmt.

Pfade zeichnen

CanvasRenderingContext2D.fill(): Füllt die aktuellen Teilpfade mit dem aktuellen Füllstil.
CanvasRenderingContext2D.stroke(): Zeichnet die Konturen der aktuellen Teilpfade mit dem aktuellen Konturstil.
CanvasRenderingContext2D.clip(): Erstellt aus den aktuellen Teilpfaden einen Beschneidungspfad. Alles, was nach dem Aufruf von clip() gezeichnet wird, erscheint nur innerhalb des Beschneidungspfads. Ein Beispiel finden Sie unter Beschneidungspfade im Canvas-Tutorial.
CanvasRenderingContext2D.isPointInPath(): Gibt an, ob der angegebene Punkt im aktuellen Pfad liegt.
CanvasRenderingContext2D.isPointInStroke(): Gibt an, ob der angegebene Punkt innerhalb des Bereichs liegt, der durch das Zeichnen der Kontur eines Pfads entsteht.

Transformationen

Objekte im CanvasRenderingContext2D-Rendering-Kontext haben eine aktuelle Transformationsmatrix und Methoden, um diese zu bearbeiten. Die Transformationsmatrix wird beim Erstellen des aktuellen Standardpfads sowie beim Zeichnen von Text, Formen und Path2D-Objekten angewendet. Die unten aufgeführten Methoden bleiben aus historischen Gründen und aus Kompatibilitätsgründen erhalten, da heute in den meisten Teilen der API stattdessen DOMMatrix-Objekte verwendet werden und dies auch künftig der Fall sein wird.

CanvasRenderingContext2D.getTransform(): Ruft die aktuelle Transformationsmatrix ab, die auf den Kontext angewendet wird.
CanvasRenderingContext2D.rotate(): Fügt der Transformationsmatrix eine Drehung hinzu. Das Winkelargument gibt einen Drehwinkel im Uhrzeigersinn im Bogenmaß an.
CanvasRenderingContext2D.scale(): Fügt den Canvas-Einheiten eine Skalierung um x in horizontaler und um y in vertikaler Richtung hinzu.
CanvasRenderingContext2D.translate(): Fügt eine Verschiebung hinzu, indem der Canvas und sein Ursprung im Koordinatensystem horizontal um x und vertikal um y verschoben werden.
CanvasRenderingContext2D.transform(): Multipliziert die aktuelle Transformationsmatrix mit der Matrix, die durch die Argumente beschrieben wird.
CanvasRenderingContext2D.setTransform(): Setzt die aktuelle Transformation auf die Einheitsmatrix zurück und ruft dann die Methode transform() mit denselben Argumenten auf.
CanvasRenderingContext2D.resetTransform(): Setzt die aktuelle Transformation auf die Einheitsmatrix zurück.

Compositing

CanvasRenderingContext2D.globalAlpha: Alphawert, der auf Formen und Bilder angewendet wird, bevor sie mit dem Canvas zusammengesetzt werden. Standardwert: 1.0 (deckend).
CanvasRenderingContext2D.globalCompositeOperation: Legt unter Berücksichtigung von globalAlpha fest, wie Formen und Bilder auf die vorhandene Bitmap gezeichnet werden.

Bilder zeichnen

CanvasRenderingContext2D.drawImage(): Zeichnet das angegebene Bild. Diese Methode ist in mehreren Varianten verfügbar und lässt sich dadurch sehr flexibel einsetzen.

Pixelbearbeitung

Siehe auch das Objekt ImageData.

CanvasRenderingContext2D.createImageData(): Erstellt ein neues, leeres ImageData-Objekt mit den angegebenen Abmessungen. Alle Pixel im neuen Objekt sind transparent schwarz.
CanvasRenderingContext2D.getImageData(): Gibt ein ImageData-Objekt zurück, das die zugrunde liegenden Pixeldaten des Canvas-Bereichs enthält, der durch ein Rechteck mit dem Startpunkt (sx, sy), der Breite sw und der Höhe sh definiert ist.
CanvasRenderingContext2D.putImageData(): Zeichnet Daten aus dem angegebenen ImageData-Objekt auf die Bitmap. Wenn ein Änderungsrechteck angegeben ist, werden nur die Pixel aus diesem Rechteck gezeichnet.

Bildglättung

CanvasRenderingContext2D.imageSmoothingEnabled: Bildglättungsmodus; ist er deaktiviert, werden Bilder beim Skalieren nicht geglättet.
CanvasRenderingContext2D.imageSmoothingQuality: Ermöglicht es Ihnen, die Qualität der Bildglättung festzulegen.

Der Canvas-Zustand

Der CanvasRenderingContext2D-Rendering-Kontext enthält verschiedene Zustände für Zeichenstile (Attribute für Linienstile, Füllstile, Schattenstile und Textstile). Die folgenden Methoden helfen Ihnen bei der Arbeit mit diesem Zustand:

CanvasRenderingContext2D.save(): Speichert den aktuellen Zeichenstilzustand auf einem Stapel, sodass Sie Änderungen daran mit restore() rückgängig machen können.
CanvasRenderingContext2D.restore(): Stellt den Zeichenstilzustand des letzten Elements auf dem mit save() gespeicherten Zustandsstapel wieder her.
CanvasRenderingContext2D.canvas Schreibgeschützt: Eine Referenz auf ein OffscreenCanvas-Objekt.
CanvasRenderingContext2D.getContextAttributes(): Gibt ein Objekt mit den tatsächlichen Kontextattributen zurück. Kontextattribute können mit HTMLCanvasElement.getContext() angefordert werden.
CanvasRenderingContext2D.reset(): Setzt den aktuellen Zeichenstilzustand auf die Standardwerte zurück.

Filter

CanvasRenderingContext2D.filter: Wendet einen CSS- oder SVG-Filter auf den Canvas an, beispielsweise um seine Helligkeit oder Unschärfe zu ändern.

Nicht unterstützte Eigenschaften und Methoden

Die folgende Methode wird von der Schnittstelle OffscreenCanvasRenderingContext2D nicht unterstützt:

CanvasRenderingContext2D.drawFocusIfNeeded(): Wenn ein bestimmtes Element fokussiert ist, zeichnet diese Methode einen Fokusring um den aktuellen Pfad.

Spezifikationen

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

Browser-Kompatibilität

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

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