CanvasRenderingContext2D

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

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

Um den 2D-Rendering-Kontext der Leinwand zu erhalten, rufen Sie getContext() am <canvas>-Element auf und geben '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:

CanvasRenderingContext2D.isContextLost()

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

Es gibt drei Methoden, die sofort Rechtecke auf die Leinwand 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 so allen zuvor gezeichneten Inhalt.

CanvasRenderingContext2D.fillRect()

Zeichnet ein gefülltes Rechteck bei der 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 dessen Breite w und Höhe h unter Verwendung des aktuellen Strichstils auf die Leinwand aufträgt.

Die folgenden Methoden zeichnen Text. Siehe auch das TextMetrics-Objekt für Texteigenschaften.

CanvasRenderingContext2D.fillText()

Zeichnet (füllt) einen gegebenen Text an der angegebenen Position (x, y).

CanvasRenderingContext2D.strokeText()

Zeichnet (strichelt) einen gegebenen Text an der angegebenen Position (x, y).

CanvasRenderingContext2D.measureText()

Gibt ein TextMetrics-Objekt zurück.

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

CanvasRenderingContext2D.lineWidth

Linienbreite. Standard 1.0.

CanvasRenderingContext2D.lineCap

Enden der Linien. Mögliche Werte: butt (Standard), round, square.

CanvasRenderingContext2D.lineJoin

Art der Ecken, an denen sich zwei Linien treffen. Mögliche Werte: round, bevel, miter (Standard).

CanvasRenderingContext2D.miterLimit

Miter-Grenzverhältnis. Standard 10.

CanvasRenderingContext2D.getLineDash()

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

CanvasRenderingContext2D.setLineDash()

Setzt das aktuelle Liniendashmuster.

CanvasRenderingContext2D.lineDashOffset

Gibt an, wo ein Dasharray auf einer Linie beginnen soll.

Die folgenden Eigenschaften steuern, wie Text angeordnet wird.

CanvasRenderingContext2D.font

Schriftart-Einstellung. Standardwert "10px sans-serif".

CanvasRenderingContext2D.textAlign

Textausrichtungseinstellung. Mögliche Werte: start (Standard), end, left, right, center.

CanvasRenderingContext2D.textBaseline

Basisausrichtungseinstellung. Mögliche Werte: top, hanging, middle, alphabetic (Standard), ideographic, bottom.

CanvasRenderingContext2D.direction

Richtung. Mögliche Werte: ltr, rtl, inherit (Standard).

CanvasRenderingContext2D.letterSpacing

Buchstabenabstand. Standard: 0px.

CanvasRenderingContext2D.fontKerning

Schriftbild-Kerning. Mögliche Werte: auto (Standard), normal, none.

CanvasRenderingContext2D.fontStretch

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

CanvasRenderingContext2D.fontVariantCaps

Variante der Großbuchstaben im Schriftbild. 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

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

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 herum. Standard #000 (schwarz).

CanvasRenderingContext2D.createConicGradient()

Erstellt einen konischen Verlauf um einen Punkt, der durch die Parameterkoordinaten repräsentiert wird.

CanvasRenderingContext2D.createLinearGradient()

Erstellt einen linearen Verlauf entlang der durch die Parameterkoordinaten angegebenen Linie.

CanvasRenderingContext2D.createRadialGradient()

Erstellt einen radialen Verlauf, der durch die Koordinaten der zwei durch die Parameter repräsentierten Kreise gegeben ist.

CanvasRenderingContext2D.createPattern()

Erstellt ein Muster mit dem angegebenen Bild. Es wird die Quelle in den durch das Wiederholungsargument angegebenen Richtungen wiederholt. Diese Methode gibt ein CanvasPattern zurück.

CanvasRenderingContext2D.shadowBlur

Gibt den Unschärfeeffekt an. Standard: 0.

CanvasRenderingContext2D.shadowColor

Farbe des Schattens. Standard: vollständig transparentes 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.

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

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, dass der Punkt des Stifts zum Anfang des aktuellen Unterpfads 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 Unterpfads 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 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 angegebenen Steuerpunkten und dem Radius hinzu, der durch eine gerade Linie mit dem vorherigen Punkt verbunden ist.

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 abgerundetes Rechteck mit einer angegebenen Position, Breite, Höhe und Eckradien.

CanvasRenderingContext2D.fill()

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

CanvasRenderingContext2D.stroke()

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

Berichtet, ob der angegebene Punkt im aktuellen Pfad enthalten ist oder nicht.

CanvasRenderingContext2D.isPointInStroke()

Berichtet, ob der angegebene Punkt innerhalb des durch das Zeichnen eines Pfads enthaltenen 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 erstellt, Text, Formen und Path2D-Objekte gemalt werden. Die unten aufgeführten Methoden bleiben aus historischen und Kompatibilitätsgründen, da mittlerweile in den meisten Teilen der API DOMMatrix-Objekte 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 steht für einen im Uhrzeigersinn gedrehten Winkel und wird in Radiant ausgedrückt.

CanvasRenderingContext2D.scale()

Fügt eine Skalierungstransformation der Leinwandeinheiten horizontal um x und vertikal um y hinzu.

CanvasRenderingContext2D.translate()

Fügt eine Translationstransformation hinzu, indem die Leinwand und ihr Ursprung horizontal um x und vertikal um y auf dem Raster verschoben wird.

CanvasRenderingContext2D.transform()

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

CanvasRenderingContext2D.setTransform()

Setzt die aktuelle Transformation auf die Einheitsmatrix zurück und ruft dann die transform()-Methode mit denselben 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 die Leinwand zusammengesetzt werden. Standard 1.0 (opaz).

CanvasRenderingContext2D.globalCompositeOperation

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

CanvasRenderingContext2D.drawImage()

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

Siehe auch das ImageData-Objekt.

CanvasRenderingContext2D.createImageData()

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

CanvasRenderingContext2D.putImageData()

Malt Daten aus dem angegebenen ImageData-Objekt auf das Bitmap. Wenn ein defektes Rechteck bereitgestellt wird, werden nur die Pixel aus diesem Rechteck gemalt.

CanvasRenderingContext2D.imageSmoothingEnabled

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

CanvasRenderingContext2D.imageSmoothingQuality

Ermöglicht das Einstellen der Qualität der Bildglättung.

Der Rendering-Kontext CanvasRenderingContext2D 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 Zustand des Zeichenstils mit einem Stapel, sodass Sie alle Änderungen mit restore() rückgängig machen können.

CanvasRenderingContext2D.restore()

Stellt den Zeichenstilzustand auf das letzte Element im 'Zustandsstapel' zurück, das durch save() gespeichert wurde.

CanvasRenderingContext2D.canvas

Eine schreibgeschützte Rückverweisung auf das HTMLCanvasElement. Kann null sein, wenn es nicht mit einem <canvas>-Element verknüpft ist.

CanvasRenderingContext2D.getContextAttributes()

Gibt ein Objekt zurück, das die vom Browser verwendeten Kontextattribute enthält. Kontextattribute können beim Erstellen des 2D-Kontextes mit HTMLCanvasElement.getContext() angefordert werden.

CanvasRenderingContext2D.reset()

Setzt den Rendering-Kontext zurück, einschließlich des Pufferbereichs, des Zeichenstapelzustands, des Pfades und der Stile.

CanvasRenderingContext2D.isContextLost() Experimentell

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

CanvasRenderingContext2D.filter

Wendet einen CSS- oder SVG-Filter auf die Leinwand an, z.B. um deren Helligkeit oder Unschärfe zu ändern.

• HTMLCanvasElement
• <canvas>
• OffscreenCanvas