OffscreenCanvasRenderingContext2D

Der folgende Code-Schnipsel erstellt ein Worker-Objekt unter Verwendung des Worker()-Konstruktors. Die Methode transferControlToOffscreen() wird benutzt, um ein OffscreenCanvas-Objekt vom <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 den 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 sich unser OffscreenCanvas Worker Beispiel an (OffscreenCanvas Worker ausführen).

Die folgende Methode ist neu in der OffscreenCanvasRenderingContext2D-Schnittstelle und existiert nicht in der CanvasRenderingContext2D-Schnittstelle:

commit() Veraltet Nicht standardisiert

Überträgt das gerenderte Bild auf das Platzhalter-<canvas>-Element des OffscreenCanvas-Objekts.

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.

Die folgenden Eigenschaften und Methoden sind von CanvasRenderingContext2D geerbt. Sie haben die gleiche Verwendung wie in CanvasRenderingContext2D

CanvasRenderingContext2D.isContextLost()

Gibt true zurück, wenn der Rendering-Kontext verloren gegangen ist.

CanvasRenderingContext2D.clearRect()

Setzt alle Pixel im durch Startpunkt (x, y) und Größe (Breite, Höhe) definierten Rechteck auf transparentes Schwarz und löscht jeglichen zuvor gezeichneten Inhalt.

CanvasRenderingContext2D.fillRect()

Zeichnet ein gefülltes Rechteck an der Position (x, y), dessen Größe durch Breite und Höhe bestimmt wird.

CanvasRenderingContext2D.strokeRect()

Malt ein Rechteck, das einen Startpunkt bei (x, y) hat und eine Breite und eine Höhe besitzt, auf die Leinwand, unter Verwendung des aktuellen Umrissstils.

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 (umrahmt) einen gegebenen Text an der angegebenen (x, y) Position.

CanvasRenderingContext2D.measureText()

Gibt ein TextMetrics-Objekt zurück.

CanvasRenderingContext2D.textRendering

Textdarstellung. Mögliche Werte: auto (Standard), optimizeSpeed, optimizeLegibility.

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

CanvasRenderingContext2D.lineWidth

Dicke der Linien. Standard 1.0.

CanvasRenderingContext2D.lineCap

Art der Endungen am Ende von Linien. 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

Winkelbegrenzungsverhältnis. Standard 10.

CanvasRenderingContext2D.getLineDash()

Gibt das aktuelle Strichmuster-Array zurück, das eine gerade Anzahl nicht-negativer Zahlen enthält.

CanvasRenderingContext2D.setLineDash()

Setzt das aktuelle Strichmuster.

CanvasRenderingContext2D.lineDashOffset

Bestimmt, wo ein Strichmuster bei einer Linie startet.

Die folgenden Eigenschaften steuern, wie Text angeordnet wird.

CanvasRenderingContext2D.font

Schriftartseinstellung. Standardwert 10px sans-serif.

CanvasRenderingContext2D.textAlign

Texteinstellung zur Ausrichtung. 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

Direktionalität. Mögliche Werte: ltr, rtl, inherit (Standard).

CanvasRenderingContext2D.letterSpacing

Zeichenabstand. Standard: 0px.

CanvasRenderingContext2D.fontKerning

Schrifteinrückung. Mögliche Werte: auto (Standard), normal, none.

CanvasRenderingContext2D.fontStretch

Schriftstreckung. Mögliche Werte: ultra-condensed, extra-condensed, condensed, semi-condensed, normal (Standard), semi-expanded, expanded, extra-expanded, ultra-expanded.

CanvasRenderingContext2D.fontVariantCaps

Schriftvarianten-Kapselung. Mögliche Werte: normal (Standard), small-caps, all-small-caps, petite-caps, all-petite-caps, unicase, titling-caps.

CanvasRenderingContext2D.textRendering Experimentell

Textdarstellung. Mögliche Werte: auto (Standard), optimizeSpeed, optimizeLegibility, geometricPrecision.

CanvasRenderingContext2D.wordSpacing

Wortabstand. Standardwert: 0px

Füllstile werden für Farben und Stile innerhalb von Formen verwendet, während Umrissstile für Linien um Formen herum verwendet werden.

CanvasRenderingContext2D.fillStyle

Farbe oder Stil, der innerhalb von Formen verwendet wird. Standard #000 (schwarz).

CanvasRenderingContext2D.strokeStyle

Farbe oder Stil, der für die Linien um Formen herum verwendet wird. Standard #000 (schwarz).

CanvasRenderingContext2D.createConicGradient()

Erstellt einen kegelförmigen Verlauf um einen durch die Parameter beschriebenen Punkt.

CanvasRenderingContext2D.createLinearGradient()

Erstellt einen linearen Verlauf entlang der durch die Parameter beschriebenen Linie.

CanvasRenderingContext2D.createRadialGradient()

Erstellt einen radialen Verlauf, der durch die Koordinaten der zwei Kreise, die durch die Parameter definiert sind, gegeben 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.

CanvasRenderingContext2D.shadowBlur

Bestimmt den Weichzeichnungseffekt. Standard: 0.

CanvasRenderingContext2D.shadowColor

Farbe des Schattens. Standard: vollständig transparentes Schwarz.

CanvasRenderingContext2D.shadowOffsetX

Horizontale Distanz, um die der Schatten verschoben wird. Standard: 0.

CanvasRenderingContext2D.shadowOffsetY

Vertikale Distanz, um die der Schatten verschoben wird. Standard: 0.

Die folgenden Methoden können zum Bearbeiten von Objektpfaden verwendet werden.

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()

Bringt die Stiftspitze zurück zum Anfang des aktuellen Unterpfades. Es versucht, eine gerade Linie vom aktuellen Punkt zum Start zu zeichnen. Wenn die Form bereits geschlossen ist oder nur einen Punkt besitzt, 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 mit einer geraden Linie.

CanvasRenderingContext2D.bezierCurveTo()

Fügt eine kubische Bézierkurve zum aktuellen Pfad hinzu.

CanvasRenderingContext2D.quadraticCurveTo()

Fügt eine quadratische Bézierkurve 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 angegebenen Kontrollpunkten und Radius hinzu, der durch eine gerade 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 Breite und Höhe 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 Breite und Höhe und Radien, die durch radii bestimmt werden, gemessen wird.

CanvasRenderingContext2D.fill()

Füllt die aktuellen Unterpfade mit dem aktuellen Füllstil.

CanvasRenderingContext2D.stroke()

Zeichnet die aktuellen Unterpfade mit dem aktuellen Umrissstil.

CanvasRenderingContext2D.clip()

Erstellt einen Schnittpfad aus den aktuellen Unterpfaden. Alles, was nach dem Aufruf von clip() gezeichnet wird, erscheint nur innerhalb des Schnittpfades. Ein Beispiel finden Sie unter Schnittpfade 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 einen Pfad umrahmten Bereichs liegt oder nicht.

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 Gründen und zur Kompatibilität erhalten, da heutzutage in den meisten Teilen der API DOMMatrix-Objekte verwendet werden und diese in Zukunft stattdessen verwendet werden.

CanvasRenderingContext2D.getTransform()

Ruft die aktuell auf den Kontext angewandte Transformationsmatrix ab.

CanvasRenderingContext2D.rotate()

Fügt der Transformationsmatrix eine Rotation hinzu. Das Winkelargument stellt einen im Uhrzeigersinn gerichteten Rotationswinkel dar und wird in Radiant ausgedrückt.

CanvasRenderingContext2D.scale()

Fügt der Transformation eine Skalierung der Canvas-Einheiten horizontal um x und vertikal um y hinzu.

CanvasRenderingContext2D.translate()

Fügt der Transformation eine Verschiebung hinzu, indem die Leinwand und ihr Ursprung horizontal um x und vertikal um y auf dem Raster verschoben werden.

CanvasRenderingContext2D.transform()

Multipliziert die aktuelle Transformationsmatrix mit der durch die Argumente beschriebenen Matrix.

CanvasRenderingContext2D.setTransform()

Setzt die aktuelle Transformation auf die Einheitsmatrix zurück und ruft dann die transform()-Methode mit den gleichen Argumenten auf.

CanvasRenderingContext2D.resetTransform()

Setzt die aktuelle Transformation auf die Einheitsmatrix zurück.

CanvasRenderingContext2D.globalAlpha

Alphawert, der auf Formen und Bilder angewendet wird, bevor sie auf das Canvas komponiert werden. Standard 1.0 (deckend).

CanvasRenderingContext2D.globalCompositeOperation

Mit angewendetem globalAlpha legt dies fest, wie Formen und Bilder auf das vorhandene Bitmap gezeichnet werden.

CanvasRenderingContext2D.drawImage()

Zeichnet das angegebene Bild. Diese Methode ist in mehreren Formaten verfügbar und bietet eine große Flexibilität in der Anwendung.

Siehe auch das ImageData-Objekt.

CanvasRenderingContext2D.createImageData()

Erstellt ein neues, leeres ImageData-Objekt mit den angegebenen Dimensionen. 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 des Canvas darstellt, der durch das Rechteck definiert ist, das bei (sx, sy) beginnt und eine sw-Breite und sh-Höhe besitzt.

CanvasRenderingContext2D.putImageData()

Malt Daten vom gegebenen ImageData-Objekt auf das Bitmap. Wenn ein schmutziges Rechteck angegeben wird, werden nur die Pixel von diesem Rechteck gemalt.

CanvasRenderingContext2D.imageSmoothingEnabled

Bildglättungsmodus; wenn deaktiviert, werden Bilder nicht geglättet, wenn sie skaliert werden.

CanvasRenderingContext2D.imageSmoothingQuality

Ermöglicht es Ihnen, die Qualität der Bildglättung einzustellen.

Der CanvasRenderingContext2D-Rendering-Kontext enthält eine Vielzahl von Zeichnungsstil-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 Zeichnungsstil-Zustand unter Verwendung eines Stapels, sodass Sie jede Änderung, die Sie daran vornehmen, mit restore() rückgängig machen können.

CanvasRenderingContext2D.restore()

Stellt den Zeichnungsstil-Zustand auf das letzte Element auf dem mit save() gespeicherten "Zustandsstapel" zurück.

CanvasRenderingContext2D.canvas

Eine schreibgeschützte Referenz auf ein OffscreenCanvas-Objekt.

CanvasRenderingContext2D.getContextAttributes()

Gibt ein Objekt zurück, das die tatsächlichen Kontextattribute enthält. Kontextattribute können mit HTMLCanvasElement.getContext() angefordert werden.

CanvasRenderingContext2D.reset()

Setzt den aktuellen Zeichnungsstil-Zustand auf die Standardwerte zurück.

CanvasRenderingContext2D.filter

Wendet einen CSS- oder SVG-Filter auf das Canvas an, z.B. um dessen Helligkeit oder Unschärfe zu ändern.

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

CanvasRenderingContext2D.drawFocusIfNeeded()

Wenn ein gegebenes Element fokussiert ist, zeichnet diese Methode einen Fokusring um den aktuellen Pfad.

• HTMLCanvasElement
• <canvas>