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.

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

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

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

Beispiel

Der folgende Codeausschnitt erstellt ein Worker-Objekt mit dem Worker()-Konstruktor. Die Methode transferControlToOffscreen() wird verwendet, um ein OffscreenCanvas-Objekt aus dem <canvas>-Element zu erhalten, 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 OffscreenCanvasRenderingContext2D verwenden, um auf das 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);
};

Für ein vollständiges Beispiel sehen Sie unser OffscreenCanvas Worker-Beispiel (OffscreenCanvas Worker ausführen).

Zusätzliche Methoden

Die folgende Methode ist neu für die OffscreenCanvasRenderingContext2D-Schnittstelle und existiert nicht in der CanvasRenderingContext2D-Schnittstelle:

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

Nicht unterstützte Funktionen

Die folgende Benutzeroberflächenmethode wird von der OffscreenCanvasRenderingContext2D-Schnittstelle 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 haben die gleiche Verwendung wie in CanvasRenderingContext2D

Kontext

CanvasRenderingContext2D.getContextAttributes(): Gibt ein Objekt zurück, das die aktuellen Kontextattribute enthält. 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 alle zuvor gezeichneten Inhalte.
CanvasRenderingContext2D.fillRect(): Zeichnet ein gefülltes Rechteck an der Position (x, y), dessen Größe durch width und height bestimmt wird.
CanvasRenderingContext2D.strokeRect(): Malt ein Rechteck, das an der Position (x, y) beginnt und eine Breite von w sowie eine Höhe von h hat, auf die Leinwand, wobei der aktuelle Strichstil verwendet wird.

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

Linienstile

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

CanvasRenderingContext2D.lineWidth: Breite der Linien. Standard 1.0.
CanvasRenderingContext2D.lineCap: Art der Endungen an den Enden der Linien. Mögliche Werte: butt (Standard), round, square.
CanvasRenderingContext2D.lineJoin: Definiert die Art der Ecken, an denen zwei Linien zusammentreffen. Mögliche Werte: round, bevel, miter (Standard).
CanvasRenderingContext2D.miterLimit: Gehrungsbeschränkung Verhältnis. Standard 10.
CanvasRenderingContext2D.getLineDash(): Gibt das aktuelle Liniendash-Muster-Array zurück, das eine gerade Anzahl von nicht-negativen Zahlen enthält.
CanvasRenderingContext2D.setLineDash(): Setzt das aktuelle Liniendash-Muster.
CanvasRenderingContext2D.lineDashOffset: Gibt an, wo ein Dash-Array auf einer Linie beginnen soll.

Textstile

Die folgenden Eigenschaften steuern, wie Text angeordnet wird.

CanvasRenderingContext2D.font: Schriftart-Einstellung. Standardwert 10px sans-serif.
CanvasRenderingContext2D.textAlign: Texteinstellungen für die Ausrichtung. Mögliche Werte: start (Standard), end, left, right, center.
CanvasRenderingContext2D.textBaseline: Grundeinstellungs-Ausrichtung. Mögliche Werte: top, hanging, middle, alphabetic (Standard), ideographic, bottom.
CanvasRenderingContext2D.direction: Direktionalität. Mögliche Werte: ltr, rtl, inherit (Standard).
CanvasRenderingContext2D.letterSpacing: Buchstabenabstand. Standard: 0px.
CanvasRenderingContext2D.fontKerning: Schriftart-Kerning. Mögliche Werte: auto (Standard), normal, none.
CanvasRenderingContext2D.fontStretch: Schriftart-Dehnung. Mögliche Werte: ultra-condensed, extra-condensed, condensed, semi-condensed, normal (Standard), semi-expanded, expanded, extra-expanded, ultra-expanded.
CanvasRenderingContext2D.fontVariantCaps: Schriftart-Variantenkappen. Mögliche Werte: normal (Standard), small-caps, all-small-caps, petite-caps, all-petite-caps, unicase, titling-caps.
CanvasRenderingContext2D.textRendering: Tekstrendering. Mögliche Werte: auto (Standard), optimizeSpeed, optimizeLegibility, geometricPrecision.
CanvasRenderingContext2D.wordSpacing: Wortabstand. Standardwert: 0px
CanvasRenderingContext2D.lang: Ruft die Sprache des Zeichenkontexts der Leinwand ab oder legt sie fest.

Füll- und Strichstile

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

CanvasRenderingContext2D.fillStyle: Farbe oder Stil zum Verwenden innerhalb von Formen. Standard ist black.
CanvasRenderingContext2D.strokeStyle: Farbe oder Stil zum Verwenden für die Linien um Formen. Standard ist black.

Verläufe und Muster

CanvasRenderingContext2D.createConicGradient(): Erstellt einen konischen Verlauf um einen Punkt, der durch die durch die Parameter dargestellten Koordinaten gegeben ist.
CanvasRenderingContext2D.createLinearGradient(): Erstellt einen linearen Verlauf entlang der Linie, die durch die durch die Parameter dargestellten Koordinaten gegeben ist.
CanvasRenderingContext2D.createRadialGradient(): Erstellt einen radialen Verlauf, gegeben durch die Koordinaten der beiden Kreise, die durch die Parameter dargestellt werden.
CanvasRenderingContext2D.createPattern(): Erstellt ein Muster mit dem angegebenen Bild. 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 transparenter Schwarzton.
CanvasRenderingContext2D.shadowOffsetX: Horizontale Distanz, die der Schatten versetzt wird. Standard: 0.
CanvasRenderingContext2D.shadowOffsetY: Vertikale Distanz, die der Schatten versetzt wird. 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 Teilpfade geleert wird. Rufen Sie diese Methode auf, wenn Sie einen neuen Pfad erstellen möchten.
CanvasRenderingContext2D.closePath(): Verursacht, dass der Punkt des Stiftes zum Anfang des aktuellen Teilpfads zurückkehrt. Es versucht, eine gerade Linie vom aktuellen Punkt zum Anfang zu zeichnen. Wenn die Form bereits geschlossen ist oder nur einen Punkt hat, tut diese Funktion nichts.
CanvasRenderingContext2D.moveTo(): Bewegt den Startpunkt eines neuen Teilpfads zu den Koordinaten (x, y).
CanvasRenderingContext2D.lineTo(): Verbindet den letzten Punkt im aktuellen Teilpfad mit den angegebenen (x, y) Koordinaten mit einer geraden Linie.
CanvasRenderingContext2D.bezierCurveTo(): Fügt eine kubische Bézier-Kurve zum aktuellen Pfad hinzu.
CanvasRenderingContext2D.quadraticCurveTo(): Fügt eine quadratische Bézier-Kurve zum aktuellen Pfad hinzu.
CanvasRenderingContext2D.arc(): Fügt einen kreisförmigen Bogen zum aktuellen Pfad hinzu.
CanvasRenderingContext2D.arcTo(): Fügt einen Bogen zum aktuellen Pfad mit den gegebenen Steuerpunkten und dem Radius hinzu, der mit einer geraden Linie mit dem vorherigen Punkt verbunden ist.
CanvasRenderingContext2D.ellipse(): Fügt einen elliptischen Bogen zum aktuellen Pfad 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 Teilpfade mit dem aktuellen Füllstil.
CanvasRenderingContext2D.stroke(): Streicht die aktuellen Teilpfade mit dem aktuellen Strichstil.
CanvasRenderingContext2D.clip(): Erstellt einen Ausschnittpfad aus den aktuellen Teilpfaden. Alles, was nach dem Aufruf von clip() gezeichnet wird, erscheint nur innerhalb des Ausschnittpfads. Für ein Beispiel siehe Ausschnittpfade 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 von einem Pfad umschlossenen Bereichs liegt oder nicht.

Transformationen

Objekte im CanvasRenderingContext2D-Rendering-Kontext haben eine aktuelle Transformationsmatrix und Methoden, um sie zu manipulieren. Die Transformationsmatrix wird beim Erstellen des aktuellen Standardpfads, beim Malen von Text, Formen und Path2D-Objekten angewendet. 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 stellt einen im Uhrzeigersinn verlaufenden Drehwinkel dar und wird in Bogenmaß ausgedrückt.
CanvasRenderingContext2D.scale(): Fügt der Transformationsmatrix eine Skalierung hinzu, indem die Leinwand-Einheiten horizontal um x und vertikal um y skaliert werden.
CanvasRenderingContext2D.translate(): Fügt eine Translation der Transformationsmatrix hinzu, indem die Leinwand und deren Ursprung horizontal um x und vertikal um y auf dem Raster verschoben werden.
CanvasRenderingContext2D.transform(): Multipliziert die aktuelle Transformationsmatrix mit der Matrix, die durch ihre Argumente beschrieben wird.
CanvasRenderingContext2D.setTransform(): Setzt die aktuelle Transformationsmatrix auf die Einheitsmatrix zurück und ruft dann die transform()-Methode mit den gleichen Argumenten auf.
CanvasRenderingContext2D.resetTransform(): Setzt die aktuelle Transformationsmatrix auf die Einheitsmatrix zurück.

Komposition

CanvasRenderingContext2D.globalAlpha: Alphawert, der auf Formen und Bilder angewendet wird, bevor sie auf die Leinwand zusammengesetzt werden. Standard 1.0 (undurchsichtig).
CanvasRenderingContext2D.globalCompositeOperation: Mit angewendetem globalAlpha stellt dies ein, wie Formen und Bilder auf das bestehende Bitmap gezeichnet werden.

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 Nutzung.

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 Pixeldaten für den Bereich der Leinwand darstellt, der durch das Rechteck markiert wird, das an (sx, sy) beginnt und eine Breite von sw und eine Höhe von sh hat.
CanvasRenderingContext2D.putImageData(): Malt Daten aus dem gegebenen ImageData-Objekt auf das Bitmap. Wenn ein schmutziges Rechteck bereitgestellt wird, werden nur die Pixel aus diesem Rechteck gemalt.

Bildglättung

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

Der Zustand der Leinwand

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

CanvasRenderingContext2D.save(): Speichert den aktuellen Zeichenstilzustand mit einem Stapel, sodass Sie jede Änderung daran mit restore() rückgängig machen können.
CanvasRenderingContext2D.restore(): Stellt den Zeichenstilzustand auf das letzte Element im 'Zustandsstapel' zurück, das mit save() gespeichert wurde.
CanvasRenderingContext2D.canvas: Ein schreibgeschützter Verweis auf ein OffscreenCanvas-Objekt.
CanvasRenderingContext2D.getContextAttributes(): Gibt ein Objekt zurück, das die aktuellen Kontextattribute enthält. 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 die Leinwand an; z.B. um deren Helligkeit oder Unschärfe zu ändern.

Nicht unterstützte Eigenschaften und Methoden

Die folgende Methode wird in der OffscreenCanvasRenderingContext2D-Schnittstelle 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