CanvasRenderingContext2D

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

Das CanvasRenderingContext2D Interface, ein Teil der Canvas-API, stellt den 2D-Rendering-Kontext für die Zeichenfläche eines <canvas> Elements bereit. Es wird zum Zeichnen von Formen, Text, Bildern und anderen Objekten verwendet.

Die Eigenschaften und Methoden dieses Interfaces sind im Referenzabschnitt dieser Seite beschrieben. Das Canvas-Tutorial bietet weitere Erklärungen, Beispiele und Ressourcen.

Für OffscreenCanvas gibt es ein entsprechendes Interface, das den Rendering-Kontext bereitstellt. Der Offscreen-Rendering-Kontext erbt die meisten Eigenschaften und Methoden des CanvasRenderingContext2D und wird im Detail auf der OffscreenCanvasRenderingContext2D Referenzseite beschrieben.

Ein einfaches Beispiel

Um eine CanvasRenderingContext2D-Instanz zu erhalten, müssen Sie zuerst ein HTML <canvas> Element haben, mit dem Sie arbeiten können:

html

<canvas id="my-house" width="300" height="300"></canvas>

Um den 2D-Rendering-Kontext des Canvas zu erhalten, rufen Sie getContext() auf dem <canvas> Element auf und übergeben '2d' als Argument:

const canvas = document.getElementById("my-house");
const ctx = canvas.getContext("2d");

Mit dem Kontext in der Hand können Sie alles zeichnen, was Sie möchten. Dieser Code zeichnet ein Haus:

// Set line width
ctx.lineWidth = 10;

// Wall
ctx.strokeRect(75, 140, 150, 110);

// Door
ctx.fillRect(130, 190, 40, 60);

// Roof
ctx.beginPath();
ctx.moveTo(50, 140);
ctx.lineTo(150, 60);
ctx.lineTo(250, 140);
ctx.closePath();
ctx.stroke();

Die resultierende Zeichnung sieht so aus:

Referenz

Kontext

CanvasRenderingContext2D.getContextAttributes(): Gibt ein Objekt mit den vom Browser verwendeten Kontexteigenschaften zurück. Kontexteigenschaften können angefordert werden, wenn HTMLCanvasElement.getContext() verwendet wird, um den 2D-Kontext zu erstellen.
CanvasRenderingContext2D.isContextLost(): Gibt true zurück, wenn der Rendering-Kontext verloren gegangen ist.

Rechtecke zeichnen

Es gibt drei Methoden, die sofort Rechtecke auf den Canvas zeichnen.

CanvasRenderingContext2D.clearRect(): Setzt alle Pixel im durch den Startpunkt (x, y) und die Größe (width, height) definierten Rechteck auf transparentes Schwarz und löscht damit zuvor gezeichneten Inhalt.
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 am Startpunkt (x, y) beginnt und eine w Breite und eine h Höhe auf den Canvas hat, unter Verwendung des aktuellen Strichstils.

Text zeichnen

Die folgenden Methoden zeichnen 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 (strixt) einen gegebenen Text an der gegebenen (x, y) Position.
CanvasRenderingContext2D.measureText(): Gibt ein TextMetrics Objekt zurück.

Linienstile

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

CanvasRenderingContext2D.lineWidth: Breite der Linien. Standardmäßig 1.0.
CanvasRenderingContext2D.lineCap: Typ von Endungen am Ende von Linien. Mögliche Werte: butt (Standard), round, square.
CanvasRenderingContext2D.lineJoin: Definiert den Typ der Ecken, wo zwei Linien sich treffen. Mögliche Werte: round, bevel, miter (Standard).
CanvasRenderingContext2D.miterLimit: Verhältnis der Gehrungsverbindung. Standard 10.
CanvasRenderingContext2D.getLineDash(): Gibt das aktuelle Liniendashmuster-Array mit einer geraden Anzahl von nicht-negativen Zahlen zurück.
CanvasRenderingContext2D.setLineDash(): Setzt das aktuelle Liniendashmuster.
CanvasRenderingContext2D.lineDashOffset: Gibt an, wo ein Dash-Array auf einer Linie beginnt.

Textstile

Die folgenden Eigenschaften steuern, wie Text angeordnet wird.

CanvasRenderingContext2D.font: Schriftart-Einstellungen. Standardwert "10px sans-serif".
CanvasRenderingContext2D.textAlign: Texteinstellung der 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: Richtung. Mögliche Werte: ltr, rtl, inherit (Standard).
CanvasRenderingContext2D.letterSpacing: Zeichenabstand. 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: Variante der Kapitälchen. Mögliche Werte: normal (Standard), small-caps, all-small-caps, petite-caps, all-petite-caps, unicase, titling-caps.
CanvasRenderingContext2D.textRendering: Textdarstellung. Mögliche Werte: auto (Standard), optimizeSpeed, optimizeLegibility, geometricPrecision.
CanvasRenderingContext2D.wordSpacing: Wortabstand. Standardwert: 0px
CanvasRenderingContext2D.lang Experimentell: Ruft die Sprache des Canvas-Zeichenkontexts ab oder legt sie fest.

Füll- und Umrissstile

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

CanvasRenderingContext2D.fillStyle: Farbe oder Stil, um innerhalb von Formen zu verwenden. Standard #000 (schwarz).
CanvasRenderingContext2D.strokeStyle: Farbe oder Stil, um die Umrisse herum zu verwenden. Standard #000 (schwarz).

Verläufe und Muster

CanvasRenderingContext2D.createConicGradient(): Erstellt einen konischen Verlauf um einen Punkt, dargestellt durch die Parameterkoordinaten.
CanvasRenderingContext2D.createLinearGradient(): Erstellt einen linearen Verlauf entlang der Linie, die durch die Parameterkoordinaten dargestellt wird.
CanvasRenderingContext2D.createRadialGradient(): Erstellt einen radialen Verlauf, dargestellt durch die Koordinaten der beiden Kreise, die durch die Parameter angegeben werden.
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: volltransparentes Schwarz.
CanvasRenderingContext2D.shadowOffsetX: Horizontale Entfernung, die der Schatten verschoben wird. Standard: 0.
CanvasRenderingContext2D.shadowOffsetY: Vertikale Entfernung, die der Schatten verschoben wird. Standard: 0.

Pfade

Die folgenden Methoden können zum Manipulieren von Pfaden von Objekten verwendet werden.

CanvasRenderingContext2D.beginPath(): Beginnt 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(): Veranlasst den Punkt des Stifts, zum Start des aktuellen Unterpfades zurückzukehren. Es versucht, eine gerade Linie vom aktuellen Punkt bis zum Start zu zeichnen. Wenn die Form bereits geschlossen ist oder nur einen Punkt hat, macht diese Funktion nichts.
CanvasRenderingContext2D.moveTo(): Verschiebt den Startpunkt eines neuen Unterpfades zu den Koordinaten (x, y).
CanvasRenderingContext2D.lineTo(): Verbindet den letzten Punkt im aktuellen Unterpfad mit den angegebenen Koordinaten (x, y) mit einer geraden Linie.
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 Radius hinzu, verbunden durch eine gerade Linie mit dem vorherigen Punkt.
CanvasRenderingContext2D.ellipse(): Fügt dem aktuellen Pfad einen elliptischen Bogen hinzu.
CanvasRenderingContext2D.rect(): Erstellt einen Pfad für ein Rechteck an Position (x, y) mit einer Größe, die durch width und height bestimmt wird.
CanvasRenderingContext2D.roundRect(): Erstellt einen Pfad für ein abgerundetes Rechteck mit einer angegebenen Position, Breite, Höhe und Eckradien.

Pfade zeichnen

CanvasRenderingContext2D.fill(): Füllt die aktuellen Unterpfade mit dem aktuellen Füllstil.
CanvasRenderingContext2D.stroke(): Trägt die aktuellen Unterpfade mit dem aktuellen Strichstil auf.
CanvasRenderingContext2D.drawFocusIfNeeded(): Wenn ein gegebenes Element fokussiert ist, zeichnet diese Methode einen Fokusring um den aktuellen Pfad.
CanvasRenderingContext2D.clip(): Erstellt einen Clip-Pfad aus den aktuellen Unterpfaden. Alles, was nach dem Aufruf von clip() gezeichnet wird, erscheint nur innerhalb des Clip-Pfads. Für ein Beispiel siehe Clip-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 Bereichs ist, der durch den Strich eines Pfades enthalten ist.

Transformationen

Objekte im CanvasRenderingContext2D Rendering-Kontext haben eine aktuelle Transformationsmatrix und Methoden, um sie zu manipulieren. Die Transformationsmatrix wird angewendet, wenn der aktuelle Standardpfad erstellt wird, sowie beim Malen von Text, Formen und Path2D Objekten. Die unten aufgeführten Methoden bleiben aus historischen und Kompatibilitätsgründen bestehen, da DOMMatrix Objekte in den meisten Teilen der API heutzutage 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 Uhrzeigersinn-Drehungswinkel dar und wird in Radianten ausgedrückt.
CanvasRenderingContext2D.scale(): Fügt eine Skalierungstransformation der Canvas-Einheiten horizontal um x und vertikal um y hinzu.
CanvasRenderingContext2D.translate(): Fügt eine Translationstransformation hinzu, indem der Canvas und sein Ursprung horizontal um x und vertikal um y verschoben werden.
CanvasRenderingContext2D.transform(): Multipliziert die aktuelle Transformationsmatrix mit der Matrix, die durch ihre Argumente beschrieben wird.
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.

Kompositvorgänge

CanvasRenderingContext2D.globalAlpha: Alphawert, der auf Formen und Bilder angewendet wird, bevor sie auf den Canvas komponiert werden. Standard 1.0 (undurchsichtig).
CanvasRenderingContext2D.globalCompositeOperation: Mit angewendetem globalAlpha legt dies fest, 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 dadurch 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 transparent schwarz.
CanvasRenderingContext2D.getImageData(): Gibt ein ImageData Objekt zurück, das die zugrunde liegenden Pixel-Daten für den Bereich der Leinwand darstellt, der durch das Rechteck definiert wird, das bei (sx, sy) beginnt und eine sw Breite und sh Höhe hat.
CanvasRenderingContext2D.putImageData(): Malt Daten aus dem gegebenen ImageData Objekt auf das Bitmap. Wenn ein Dirty-Rechteck vorhanden ist, werden nur die Pixel aus diesem Rechteck gemalt.

Bildglättung

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

Der Canvas-Zustand

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

CanvasRenderingContext2D.save(): Speichert den aktuellen Zeichnungsstilzustand unter Verwendung eines Stapels, sodass Sie jede Änderung, die Sie daran vornehmen, mit restore() rückgängig machen können.
CanvasRenderingContext2D.restore(): Stellt den Zeichnungsstilzustand auf das letzte Element des 'Zustandsstapels' zurück, das durch save() gespeichert wurde.
CanvasRenderingContext2D.canvas: Ein schreibgeschützter Rückverweis auf das HTMLCanvasElement. Kann null sein, wenn es nicht mit einem <canvas> Element verknüpft ist.
CanvasRenderingContext2D.getContextAttributes(): Gibt ein Objekt mit den vom Browser verwendeten Kontexteigenschaften zurück. Kontexteigenschaften können angefordert werden, wenn HTMLCanvasElement.getContext() verwendet wird, um den 2D-Kontext zu erstellen.
CanvasRenderingContext2D.reset(): Setzt den Rendering-Kontext zurück, einschließlich des Pufferbereichs, des Zeichenstil-Statusstapels, des Pfades und der Styles.
CanvasRenderingContext2D.isContextLost() Experimentell: Gibt true zurück, wenn der Rendering-Kontext verloren gegangen ist.

Filter

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

Spezifikationen

Specification
HTML # 2dcontext