CanvasRenderingContext2D

Baseline Weitgehend verfügbar *

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

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

Das CanvasRenderingContext2D Interface, Teil der Canvas-API, stellt den 2D-Rendering-Kontext für die Zeichenoberfläche eines <canvas>-Elements zur Verfügung. Es wird verwendet, um Formen, Text, Bilder und andere Objekte zu zeichnen.

Die Eigenschaften und Methoden des Interface sind im Referenzteil dieser Seite beschrieben. Das Canvas-Tutorial bietet ebenfalls Erklärungen, Beispiele und Ressourcen.

Für OffscreenCanvas gibt es ein äquivalentes Interface, das den Rendering-Kontext bereitstellt. Der Offscreen-Rendering-Kontext erbt die meisten der gleichen Eigenschaften und Methoden wie das CanvasRenderingContext2D und wird detaillierter in der Referenzseite OffscreenCanvasRenderingContext2D beschrieben.

Einfaches Beispiel

Um eine Instanz von CanvasRenderingContext2D zu erhalten, müssen Sie zuerst ein HTML-<canvas>-Element zum Arbeiten haben:

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 geben '2d' als Argument an:

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 zurück, das die vom Browser verwendeten Kontextattribute enthält. Kontextattribute 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 das Canvas zeichnen.

CanvasRenderingContext2D.clearRect(): Setzt alle Pixel im Rechteck, das durch den Startpunkt (x, y) und die Größe (width, height) definiert wird, auf transparentes Schwarz und löscht alle zuvor gezeichneten Inhalte.
CanvasRenderingContext2D.fillRect(): Zeichnet ein gefülltes Rechteck an die Position (x, y), dessen Größe durch width und height bestimmt wird.
CanvasRenderingContext2D.strokeRect(): Malt ein Rechteck, das einen Startpunkt bei (x, y) hat und eine w Breite und h Höhe auf das Canvas aufweist, 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 angegebenen (x, y)-Position.
CanvasRenderingContext2D.strokeText(): Zeichnet (streicht) einen gegebenen Text an der angegebenen (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. Standard 1.0.
CanvasRenderingContext2D.lineCap: Typ der Enden an den Enden von Linien. Mögliche Werte: butt (Standard), round, square.
CanvasRenderingContext2D.lineJoin: Definiert den Typ der Ecken, bei denen zwei Linien aufeinandertreffen. Mögliche Werte: round, bevel, miter (Standard).
CanvasRenderingContext2D.miterLimit: Miter-Limit-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 beginnt.

Textstile

Die folgenden Eigenschaften steuern, wie Text angeordnet ist.

CanvasRenderingContext2D.font: Schriftart-Einstellung. Standardwert "10px sans-serif".
CanvasRenderingContext2D.textAlign: Textausrichtungs-Einstellung. Mögliche Werte: start (Standard), end, left, right, center.
CanvasRenderingContext2D.textBaseline: Basisausrichtungs-Einstellung. 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: Schriftkerning. 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: Schriftvariante. 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: Ruft die Sprache des Canvas-Zeichenkontexts ab oder legt sie fest.

Füll- und Strichstile

Füll-Styling wird für Farben und Stile innerhalb von Formen genutzt und Strich-Styling für die Linien um Formen herum.

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

Verläufe und Muster

CanvasRenderingContext2D.createConicGradient(): Erstellt einen konischen Verlauf um einen Punkt, der durch die Parameterkoordinaten repräsentiert wird.
CanvasRenderingContext2D.createLinearGradient(): Erstellt einen linearen Verlauf entlang der Linie, die durch die Parameterkoordinaten repräsentiert wird.
CanvasRenderingContext2D.createRadialGradient(): Erstellt einen radialen Verlauf, der durch die Koordinaten der beiden durch die Parameter repräsentierten Kreise bestimmt 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 Weichzeichnungseffekt an. Standard: 0.
CanvasRenderingContext2D.shadowColor: Farbe des Schattens. Standard: volltransparentes Schwarz.
CanvasRenderingContext2D.shadowOffsetX: Horizontale Entfernung, um die der Schatten versetzt wird. Standard: 0.
CanvasRenderingContext2D.shadowOffsetY: Vertikale Entfernung, um 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 Unterpfade geleert wird. Rufen Sie diese Methode auf, wenn Sie einen neuen Pfad erstellen möchten.
CanvasRenderingContext2D.closePath(): Bewegt den Punkt des Stiftes zurück zum Start 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 Anfangspunkt 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é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 Kreisbogen mit den angegebenen Steuerpunkten und 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 einer 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(): Streicht die aktuellen Unterpfade mit dem aktuellen Strichstil.
CanvasRenderingContext2D.drawFocusIfNeeded(): Wenn ein gegebenes Element fokussiert ist, zeichnet diese Methode einen Fokusring um den aktuellen Pfad.
CanvasRenderingContext2D.clip(): Erstellt einen Schneidemaskenpfad aus den aktuellen Unterpfaden. Alles, was nach dem Aufruf von clip() gezeichnet wird, erscheint nur innerhalb des Schneidemaskenpfades. Für ein Beispiel siehe Clipping paths 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 vom Streichen eines Pfades eingeschlossenen Bereiches liegt oder nicht.

Transformationen

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

CanvasRenderingContext2D.getTransform(): Ruft die aktuelle Transformationsmatrix ab, die auf den Kontext angewendet wird.
CanvasRenderingContext2D.rotate(): Fügt der Transformationsmatrix eine Rotation hinzu. Das Winkelargument stellt einen im Uhrzeigersinn verlaufenden Drehwinkel dar und wird in Radiant ausgedrückt.
CanvasRenderingContext2D.scale(): Fügt den Canvas-Einheiten eine Skalierungstransformation in x-Richtung horizontal und in y-Richtung vertikal hinzu.
CanvasRenderingContext2D.translate(): Fügt eine Translations-Transformation hinzu, indem das Canvas und sein Ursprung x horizontal und y vertikal 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 Transformation auf die Identitätsmatrix zurück und ruft dann die transform()-Methode mit denselben Argumenten auf.
CanvasRenderingContext2D.resetTransform(): Setzt die aktuelle Transformation auf die Identitätsmatrix zurück.

Komposition

CanvasRenderingContext2D.globalAlpha: Alphawert, der auf Formen und Bilder angewendet wird, bevor sie auf das Canvas zusammengesetzt werden. Standard 1.0 (undurchsichtig).
CanvasRenderingContext2D.globalCompositeOperation: Mit angewendetem globalAlpha wird festgelegt, 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 ein hohes Maß an Flexibilität bei 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 Pixeldaten für den Bereich des Canvas 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 angegebenen 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 deaktiviert, werden Bilder beim Skalieren nicht geglättet.
CanvasRenderingContext2D.imageSmoothingQuality: Ermöglicht die Festlegung der Qualität der Bildglättung.

Der Zustand des Canvas

Der CanvasRenderingContext2D-Renderingkontext enthält eine Vielzahl von Zeichenstilzustä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 unter Verwendung eines Stapels, sodass Sie jede Änderung mit restore() rückgängig machen können.
CanvasRenderingContext2D.restore(): Stellt den Zeichenstilzustand auf das letzte Element im Zustand-Stapel wieder her, das mit save() gespeichert wurde.
CanvasRenderingContext2D.canvas: Ein schreibgeschützter Rückverweis auf das HTMLCanvasElement. Könnte null sein, wenn es nicht mit einem <canvas>-Element assoziiert ist.
CanvasRenderingContext2D.getContextAttributes(): Gibt ein Objekt zurück, das die vom Browser verwendeten Kontextattribute enthält. Kontextattribute 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 Backup-Puffers, des Zeichenzustandstapels, des Pfades und der Stile.
CanvasRenderingContext2D.isContextLost(): Gibt true zurück, wenn der Rendering-Kontext verloren gegangen ist.

Filter

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

Spezifikationen

Spezifikation
HTML # 2dcontext

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