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.

Das OffscreenCanvasRenderingContext2D-Interface ist ein CanvasRenderingContext2D Rendering-Kontext zum Zeichnen auf die Bitmap eines OffscreenCanvas-Objekts. Es ist ähnlich dem CanvasRenderingContext2D-Objekt, mit den folgenden Unterschieden:

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

Beispiel

Der folgende Code-Snippet erstellt ein Worker-Objekt mithilfe des Worker()-Konstruktors. Die Methode transferControlToOffscreen() wird verwendet, um ein OffscreenCanvas-Objekt aus dem <canvas>-Element zu bekommen, 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 das 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

Die folgende Methode ist neu im OffscreenCanvasRenderingContext2D-Interface und existiert nicht im CanvasRenderingContext2D-Interface:

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

Nicht unterstützte Funktionen

Die folgende Benutzeroberflächenmethode wird vom OffscreenCanvasRenderingContext2D-Interface nicht unterstützt:

CanvasRenderingContext2D.drawFocusIfNeeded(): Wenn ein gegebenes 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 haben die gleiche Verwendung wie im CanvasRenderingContext2D.

Kontext

CanvasRenderingContext2D.getContextAttributes() Experimentell: Gibt ein Objekt zurück, das die tatsächlichen Kontexteigenschaften enthält. Kontexteigenschaften 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 so alle zuvor gezeichneten Inhalte.
CanvasRenderingContext2D.fillRect(): Zeichnet ein ausgefülltes Rechteck an der Position (x, y) mit einer Größe, die durch width und height bestimmt wird.
CanvasRenderingContext2D.strokeRect(): Malt ein Rechteck mit einem Startpunkt bei (x, y) und einer w Breite und einer h Höhe auf die Leinwand, unter Verwendung des aktuellen Zeichnungsstils.

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 gegebenen Text an der angegebenen (x, y) Position.
CanvasRenderingContext2D.strokeText(): Zeichnet (umrandet) einen gegebenen Text an der angegebenen (x, y) Position.
CanvasRenderingContext2D.measureText(): Gibt ein TextMetrics-Objekt zurück.
CanvasRenderingContext2D.textRendering: Textrendering. Mögliche Werte: auto (Standard), optimizeSpeed, optimizeLegibility.

Linienstile

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

CanvasRenderingContext2D.lineWidth: Breite der Linien. Standardmäßig 1.0.
CanvasRenderingContext2D.lineCap: Typ der Enden an den Linienenden. Mögliche Werte: butt (Standard), round, square.
CanvasRenderingContext2D.lineJoin: Definiert die Art der Ecken, an denen zwei Linien aufeinandertreffen. Mögliche Werte: round, bevel, miter (Standard).
CanvasRenderingContext2D.miterLimit: Miter-Limit-Verhältnis. Standard 10.
CanvasRenderingContext2D.getLineDash(): Gibt das aktuelle gestrichelte Linienmuster als Array zurück, das eine gerade Anzahl von nicht-negativen Zahlen enthält.
CanvasRenderingContext2D.setLineDash(): Legt das aktuelle gestrichelte Linienmuster fest.
CanvasRenderingContext2D.lineDashOffset: Gibt an, wo ein gestricheltes Muster auf einer Linie beginnen soll.

Textstile

Die folgenden Eigenschaften bestimmen, wie Text angeordnet wird.

CanvasRenderingContext2D.font: Schrifteinstellung. Standardwert 10px sans-serif.
CanvasRenderingContext2D.textAlign: Textausrichtungseinstellung. Mögliche Werte: start (Standard), end, left, right, center.
CanvasRenderingContext2D.textBaseline: Baseline-Ausrichtungseinstellung. Mögliche Werte: top, hanging, middle, alphabetic (Standard), ideographic, bottom.
CanvasRenderingContext2D.direction: Schreibrichtung. Mögliche Werte: ltr, rtl, inherit (Standard).
CanvasRenderingContext2D.letterSpacing: Buchstabenabstand. Standard: 0px.
CanvasRenderingContext2D.fontKerning: Schriftkerning. Mögliche Werte: auto (Standard), normal, none.
CanvasRenderingContext2D.fontStretch: Schriftdehnung. Mögliche Werte: ultra-condensed, extra-condensed, condensed, semi-condensed, normal (Standard), semi-expanded, expanded, extra-expanded, ultra-expanded.
CanvasRenderingContext2D.fontVariantCaps: Schriftvariante für Großbuchstaben. Mögliche Werte: normal (Standard), small-caps, all-small-caps, petite-caps, all-petite-caps, unicase, titling-caps.
CanvasRenderingContext2D.textRendering Experimentell: Textrendering. Mögliche Werte: auto (Standard), optimizeSpeed, optimizeLegibility, geometricPrecision.
CanvasRenderingContext2D.wordSpacing: Wortabstand. Standardwert: 0px
CanvasRenderingContext2D.lang Experimentell: Erhält oder setzt die Sprache des Canvas-Zeichnungskontexts.

Füll- und Zeichenstile

Füllstile werden für Farben und Stile innerhalb von Formen verwendet, und Zeichenstile werden für die Linien um Formen herum verwendet.

CanvasRenderingContext2D.fillStyle: Farbe oder Stil für die Innenseite von Formen. Standard #000 (schwarz).
CanvasRenderingContext2D.strokeStyle: Farbe oder Stil für die Linien um Formen. Standard #000 (schwarz).

Farbverläufe und Muster

CanvasRenderingContext2D.createConicGradient(): Erstellt einen kegelförmigen Farbverlauf um einen Punkt, der durch die Parameterkoordinaten repräsentiert wird.
CanvasRenderingContext2D.createLinearGradient(): Erstellt einen linearen Farbverlauf entlang der Linie, die durch die Parameterkoordinaten repräsentiert wird.
CanvasRenderingContext2D.createRadialGradient(): Erstellt einen radialen Farbverlauf, der durch die Koordinaten der beiden durch die Parameter repräsentierten Kreise definiert wird.
CanvasRenderingContext2D.createPattern(): Erstellt ein Muster unter Verwendung des angegebenen Bildes. Es wiederholt die Quelle in den durch das Wiederholungsargument angegebenen Richtungen. Diese Methode gibt ein CanvasPattern zurück.

Schatten

CanvasRenderingContext2D.shadowBlur: Gibt den Unschärfeeffekt an. Standard: 0.
CanvasRenderingContext2D.shadowColor: Farbe des Schattens. Standard: vollständig transparentes Schwarz.
CanvasRenderingContext2D.shadowOffsetX: Horizontale Verschiebung des Schattens. Standard: 0.
CanvasRenderingContext2D.shadowOffsetY: Vertikale Verschiebung des Schattens. Standard: 0.

Pfade

Die folgenden Methoden können verwendet werden, um Pfade von Objekten zu manipulieren.

CanvasRenderingContext2D.beginPath(): Startet einen neuen Pfad, indem die Liste der Unterpfade geleert wird. Rufen Sie diese Methode auf, wenn Sie einen neuen Pfad erstellen möchten.
CanvasRenderingContext2D.closePath(): Bewegt den Punkt des Stifts zurück zum Anfang des aktuellen Unterpfades. Es versucht, eine gerade Linie vom aktuellen Punkt zum Start zu zeichnen. Wenn die Form bereits geschlossen wurde oder nur einen Punkt hat, tut diese Funktion nichts.
CanvasRenderingContext2D.moveTo(): Bewegt den Startpunkt eines neuen Unterpfades zu den (x, y) Koordinaten.
CanvasRenderingContext2D.lineTo(): Verbindet den letzten Punkt im aktuellen Unterpfad mit den angegebenen (x, y) Koordinaten durch eine gerade Linie.
CanvasRenderingContext2D.bezierCurveTo(): Fügt dem aktuellen Pfad eine kubische Bézier-Kurve hinzu.
CanvasRenderingContext2D.quadraticCurveTo(): Fügt dem aktuellen Pfad eine quadratische Bézier-Kurve hinzu.
CanvasRenderingContext2D.arc(): Fügt dem aktuellen Pfad einen kreisförmigen Bogen hinzu.
CanvasRenderingContext2D.arcTo(): Fügt dem aktuellen Pfad einen Bogen mit den gegebenen Kontrollpunkten und dem Radius hinzu, verbunden mit dem vorherigen Punkt durch eine gerade Linie.
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) mit einer Größe, die durch width und height bestimmt wird.
CanvasRenderingContext2D.roundRect(): Erstellt einen Pfad für ein Rechteck mit abgerundeten Ecken an der Position (x, y) mit einer Größe, die durch width und height bestimmt wird, und Radien, die durch radii bestimmt werden.

Pfade zeichnen

CanvasRenderingContext2D.fill(): Füllt die aktuellen Unterpfade mit dem aktuellen Füllstil.
CanvasRenderingContext2D.stroke(): Zeichnet die aktuellen Unterpfade mit dem aktuellen Zeichnungsstil.
CanvasRenderingContext2D.clip(): Erstellt einen Clipping-Pfad aus den aktuellen Unterpfaden. Alles, was nach dem Aufruf von clip() gezeichnet wird, erscheint nur innerhalb des Clipping-Pfads. Für ein Beispiel siehe Clipping-Pfade im Canvas-Tutorial.
CanvasRenderingContext2D.isPointInPath(): Meldet, ob der angegebene Punkt im aktuellen Pfad enthalten ist oder nicht.
CanvasRenderingContext2D.isPointInStroke(): Meldet, ob der angegebene Punkt innerhalb des durch das Zeichnen eines Pfads definierten Bereichs liegt oder nicht.

Transformationen

Objekte im CanvasRenderingContext2D Rendering-Kontext haben eine aktuelle Transformationsmatrix und Methoden, um sie zu manipulieren. Die Transformationsmatrix wird angewendet, wenn der aktuelle Standardpfad, Text, Formen und Path2D-Objekte erstellt werden. Die unten aufgeführten Methoden bleiben aus historischen und Kompatibilitätsgründen erhalten, da DOMMatrix-Objekte heutzutage in den meisten Teilen der API verwendet werden und in Zukunft verwendet werden.

CanvasRenderingContext2D.getTransform(): Ruft die aktuelle Transformationsmatrix ab, die auf den Kontext angewendet wird.
CanvasRenderingContext2D.rotate(): Fügt der Transformationsmatrix eine Drehung hinzu. Das Winkelargument repräsentiert einen im Uhrzeigersinn gerichteten Drehwinkel und wird in Bogenmaß angegeben.
CanvasRenderingContext2D.scale(): Fügt eine Skalentransformation zu den Leinwandeinheiten um x horizontal und um y vertikal hinzu.
CanvasRenderingContext2D.translate(): Fügt eine Translationstransformation hinzu, indem die Leinwand und ihr Ursprung x horizontal und y vertikal im Raster verschoben werden.
CanvasRenderingContext2D.transform(): Multipliziert die aktuelle Transformationsmatrix mit der durch ihre Argumente beschriebenen Matrix.
CanvasRenderingContext2D.setTransform(): Setzt die aktuelle Transformationsmatrix auf die Einheitsmatrix zurück und ruft dann die transform()-Methode mit denselben Argumenten auf.
CanvasRenderingContext2D.resetTransform(): Setzt die aktuelle Transformation mit der Einheitsmatrix zurück.

Kompositing

CanvasRenderingContext2D.globalAlpha: Alphawert, der auf Formen und Bilder angewendet wird, bevor sie auf die Leinwand zusammengesetzt werden. Standard 1.0 (opak).
CanvasRenderingContext2D.globalCompositeOperation: Legt fest, wie Formen und Bilder auf das bestehende Bitmap gezeichnet werden, wobei globalAlpha angewendet wird.

Bilder zeichnen

CanvasRenderingContext2D.drawImage(): Zeichnet das angegebene Bild. Diese Methode ist in mehreren Formaten verfügbar und bietet eine große Flexibilität in ihrer Verwendung.

Pixelmanipulation

Siehe auch das ImageData-Objekt.

CanvasRenderingContext2D.createImageData(): Erstellt ein neues, leeres ImageData-Objekt mit den angegebenen Abmessungen. Alle Pixel im neuen Objekt sind transparentes Schwarz.
CanvasRenderingContext2D.getImageData(): Gibt ein ImageData-Objekt zurück, das die zugrunde liegenden Pixel-Daten für den Bereich der Leinwand repräsentiert, der durch das Rechteck, das bei (sx, sy) beginnt und eine sw Breite und sh Höhe hat, angegeben ist.
CanvasRenderingContext2D.putImageData(): Malt Daten aus dem gegebenen ImageData-Objekt auf die Bitmap. Wenn ein schmutziges Rechteck angegeben wird, werden nur die Pixel aus diesem Rechteck bemalt.

Bildglättung

CanvasRenderingContext2D.imageSmoothingEnabled: Bildglättungsmodus; wenn deaktiviert, werden Bilder nicht geglättet, wenn sie skaliert werden.
CanvasRenderingContext2D.imageSmoothingQuality: Erlaubt es, die Qualität der Bildglättung festzulegen.

Der Canvas-Zustand

Der CanvasRenderingContext2D Rendering-Kontext enthält eine Vielzahl von Zeichenstilzuständen (Attribute für Linienstile, Füllstile, Schattenstile, Textstile). Die folgenden Methoden helfen Ihnen dabei, mit diesem Zustand zu arbeiten:

CanvasRenderingContext2D.save(): Speichert den aktuellen Zeichenstilzustand mithilfe eines Stacks, sodass Sie jede Änderung, die Sie daran vornehmen, mit restore() zurücksetzen können.
CanvasRenderingContext2D.restore(): Stellt den Zeichenstilzustand auf das letzte Element im 'Zustands-Stack', das von save() gespeichert wurde, wieder her.
CanvasRenderingContext2D.canvas: Eine schreibgeschützte Referenz auf ein OffscreenCanvas-Objekt.
CanvasRenderingContext2D.getContextAttributes() Experimentell: Gibt ein Objekt zurück, das die tatsächlichen Kontexteigenschaften enthält. Kontexteigenschaften 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 die Leinwand an; z.B. um ihre Helligkeit oder Unschärfe zu ändern.

Nicht unterstützte Eigenschaften und Methoden

Die folgende Methode wird im OffscreenCanvasRenderingContext2D-Interface nicht unterstützt:

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

Spezifikationen

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