Path2D

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.

Hinweis: Diese Funktion ist in Web Workers verfügbar.

Das Path2D-Interface der Canvas 2D API wird verwendet, um einen Pfad zu deklarieren, der dann auf einem CanvasRenderingContext2D-Objekt verwendet werden kann. Die Methoden für Pfade des CanvasRenderingContext2D-Interface sind auch auf diesem Interface vorhanden, was Ihnen die Möglichkeit bietet, Ihren Pfad jederzeit zu speichern und wiederzugeben.

Konstruktoren

Path2D()

Path2D-Konstruktor. Erstellt ein neues Path2D-Objekt.

Instanzmethoden

Path2D.addPath()

Fügt einen Pfad zum aktuellen Pfad hinzu.

Path2D.closePath()

Bewegt den Stift wieder zum Anfang des aktuellen Teilpfades. Es wird versucht, eine gerade Linie vom aktuellen Punkt zum Anfang zu zeichnen. Wenn die Form bereits geschlossen wurde oder nur einen Punkt hat, macht diese Funktion nichts.

Path2D.moveTo()

Verschiebt den Startpunkt eines neuen Teilpfades zu den (x, y) Koordinaten.

Path2D.lineTo()

Verbindet den letzten Punkt im Teilpfad mit den (x, y) Koordinaten mit einer geraden Linie.

Path2D.bezierCurveTo()

Fügt dem Pfad eine kubische Bézier-Kurve hinzu. Es erfordert drei Punkte. Die ersten beiden Punkte sind Kontrollpunkte und der dritte ist der Endpunkt. Der Startpunkt ist der letzte Punkt im aktuellen Pfad, der durch moveTo() vor dem Erstellen der Bézier-Kurve geändert werden kann.

Path2D.quadraticCurveTo()

Fügt dem aktuellen Pfad eine quadratische Bézier-Kurve hinzu.

Path2D.arc()

Fügt dem Pfad einen Bogen hinzu, der am Punkt (x, y) mit dem Radius r, beginnend bei startAngle und endend bei endAngle, im angegebenen counterclockwise-Uhrzeigersinn verläuft (standardmäßig im Uhrzeigersinn).

Path2D.arcTo()

Fügt dem Pfad einen kreisförmigen Bogen mit den gegebenen Kontrollpunkten und dem Radius hinzu, verbunden mit dem vorherigen Punkt durch eine gerade Linie.

Path2D.ellipse()

Fügt dem Pfad einen elliptischen Bogen hinzu, der am Punkt (x, y) mit den Radien radiusX und radiusY, beginnend bei startAngle und endend bei endAngle, im angegebenen counterclockwise-Uhrzeigersinn verläuft (standardmäßig im Uhrzeigersinn).

Path2D.rect()

Erstellt einen Pfad für ein Rechteck an der Position (x, y) mit einer Größe, die durch width und height bestimmt wird.

Path2D.roundRect()

Erstellt einen Pfad für ein abgerundetes Rechteck an der Position (x, y) mit einer Größe, die durch width und height bestimmt wird, und die Radien des kreisförmigen Bogens für die Ecken des Rechtecks werden durch radii bestimmt.

Spezifikationen

Specification
HTML Standard
# path2d-objects

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch