CanvasRenderingContext2D

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

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

Um den 2D-Zeichnungskontext der Leinwand 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:

CanvasRenderingContext2D.isContextLost()

Gibt true zurück, wenn der Zeichenkontext 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 (Breite, Höhe) definierten Rechteck auf transparentes Schwarz und löscht damit 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 w-Breite und eine h-Höhe hat, auf die Leinwand unter Verwendung des aktuellen Strichstils.

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

CanvasRenderingContext2D.measureText()

Gibt ein TextMetrics-Objekt zurück.

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

CanvasRenderingContext2D.lineWidth

Breite der Linien. Standardwert 1.0.

CanvasRenderingContext2D.lineCap

Art der Enden an den Linienenden. Mögliche Werte: butt (Standard), round, square.

CanvasRenderingContext2D.lineJoin

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

CanvasRenderingContext2D.miterLimit

Miter-Limit-Verhältnis. Standardwert 10.

CanvasRenderingContext2D.getLineDash()

Gibt das aktuelle Linienmuster-Array zurück, das eine gerade Anzahl von nicht-negativen Zahlen enthält.

CanvasRenderingContext2D.setLineDash()

Setzt das aktuelle Linienmuster.

CanvasRenderingContext2D.lineDashOffset

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

Die folgenden Eigenschaften steuern, wie Text layoutet wird.

CanvasRenderingContext2D.font

Schriftarteneinstellung. Standardwert "10px sans-serif".

CanvasRenderingContext2D.textAlign

Texteinstellung zur Ausrichtung. Mögliche Werte: start (Standard), end, left, right, center.

CanvasRenderingContext2D.textBaseline

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

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

CanvasRenderingContext2D.fontStretch

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

CanvasRenderingContext2D.fontVariantCaps

Schriftarten-Variant-Caps. Mögliche Werte: normal (Standard), small-caps, all-small-caps, petite-caps, all-petite-caps, unicase, titling-caps.

CanvasRenderingContext2D.textRendering

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

CanvasRenderingContext2D.wordSpacing

Wortabstand. Standardwert: 0px

CanvasRenderingContext2D.lang Experimentell

Ruft die Sprache des Zeichenkontexts der Leinwand ab oder setzt sie.

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 für das Innere von Formen. Standard: #000 (Schwarz).

CanvasRenderingContext2D.strokeStyle

Farbe oder Stil für die Linien um Formen. Standard: #000 (Schwarz).

CanvasRenderingContext2D.createConicGradient()

Erstellt einen konischen Verlauf um einen Punkt, der durch die Parameterkoordinaten angegeben 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 beiden durch die Parameter angegebenen Kreise definiert 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

Gibt den Weichzeichnungseffekt an. Standard: 0.

CanvasRenderingContext2D.shadowColor

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

CanvasRenderingContext2D.shadowOffsetX

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

CanvasRenderingContext2D.shadowOffsetY

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

Die folgenden Methoden können verwendet werden, um die 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()

Veranlasst, dass der Punkt des Stifts zum Anfang des aktuellen Unterpfades zurückkehrt. Es versucht eine gerade Linie vom aktuellen Punkt zum Start zu zeichnen. Wenn die Form bereits geschlossen wurde oder nur einen Punkt hat, macht 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 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 gegebenen Kontrollpunkten 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 Breite und Höhe bestimmt wird.

CanvasRenderingContext2D.roundRect()

Erstellt einen Pfad für ein abgerundetes Rechteck mit einer angegebenen Position, Breite, Höhe und Eckenradien.

CanvasRenderingContext2D.fill()

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

CanvasRenderingContext2D.stroke()

Umrandet 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 Schnittpfad aus den aktuellen Unterpfaden. Alles, was nach dem Aufruf von clip() gezeichnet wird, erscheint nur innerhalb des Schnittpfades. Für ein Beispiel sehen Sie Clip-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 Umranden eines Pfades eingeschlossenen Bereichs liegt oder nicht.

Objekte im CanvasRenderingContext2D-Zeichnungskontext haben eine aktuelle Transformationsmatrix und Methoden, sie zu manipulieren. Die Transformationsmatrix wird bei der Erstellung des aktuellen Standardpfades, beim Zeichnen von Text, Formen und Path2D-Objekten angewendet. Die unten aufgeführten Methoden bleiben aus historischen und Kompatibilitätsgründen erhalten, da heutzutage in den meisten Teilen der API DOMMatrix-Objekte 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 Rotation hinzu. Das Winkelargument stellt einen im Uhrzeigersinn gerichteten Rotationswinkel dar und wird in Bogenmaß angegeben.

CanvasRenderingContext2D.scale()

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

CanvasRenderingContext2D.translate()

Fügt der Transformation eine Translation hinzu, indem die Leinwand und ihr Ursprung x horizontal und y vertikal im Raster verschieben werden.

CanvasRenderingContext2D.transform()

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

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.

CanvasRenderingContext2D.globalAlpha

Alphawert, der auf Formen und Bilder angewendet wird, bevor sie auf die Leinwand zusammengesetzt werden. Standard: 1.0 (deckend).

CanvasRenderingContext2D.globalCompositeOperation

Mit globalAlpha angewendet legt 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, die viel Flexibilität bei ihrer Verwendung bieten.

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 repräsentiert, der durch das Rechteck beginnt, 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 schmutziges Rechteck angegeben wird, werden nur die Pixel dieses Rechtecks gemalt.

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 CanvasRenderingContext2D-Zeichnungskontext 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 mit einem Stapel, damit Sie jede Änderung, die Sie daran vornehmen, mit restore() rückgängig machen können.

CanvasRenderingContext2D.restore()

Stellt den Zeichenstilzustand auf das letzte Element auf dem 'Statusstapel' wieder her, das durch save() gespeichert wurde.

CanvasRenderingContext2D.canvas

Ein schreibgeschützter Rückverweis auf das HTMLCanvasElement. Könnte 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 angefordert werden, wenn HTMLCanvasElement.getContext() verwendet wird, um den 2D-Kontext zu erstellen.

CanvasRenderingContext2D.reset()

Setzt den Zeichenkontext zurück, einschließlich des Pufferings, des Zeichenstatusstapels, des Pfades und der Stile.

CanvasRenderingContext2D.isContextLost() Experimentell

Gibt true zurück, wenn der Zeichenkontext verloren gegangen ist.

CanvasRenderingContext2D.filter

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

• HTMLCanvasElement
• <canvas>
• OffscreenCanvas