JavaScript/Path2D

Mit der Path2D Schnittstelle der Canvas 2D API können Sie komplexe Formen deklarieren und zwischenspeichern. Während Sie bisher in Canvas alle Grafiken immer wieder neu berechnen und zeichnen mussten, können Sie diese Pfade nun behalten und immer wieder aufrufen.

Zusätzlich können Sie mit dem Konstruktor Path2D() vorhandene SVG-Pfad-Daten in canvas darstellen.

constructor:

• Path2D()

Methoden:

• Path2D.addPath(): fügt dem aktuellen Pfad einen weiteren hinzu
• Path2D.closePath(): schließt den Pfad, indem eine gerade Linie zum Ausgangspunkt führt.
• Path2D.moveTo(): bewegt den Anfangspunkt zu folgenden (x, y) Koordinaten.
• Path2D.lineTo(): zeichnet eine Linie zu folgenden (x, y) Koordinaten
• Path2D.bezierCurveTo(): fügt eine kubische Bézier-Kurve hinzu. Sie benötigt drei Punkte: zwei Kontrollpunkte und einen Endpunkt. Start ist der aktuelle Punkt des Pfades.
• Path2D.quadraticCurveTo(): fügt eine quadratische Bézier-Kurve hinzu.

 

• Path2D.arc(): fügt einen Bogen hinzu, der den Mittelpunkt in der (x, y) Position mit dem Radius r starting at startAngle and ending at endAngle going in the given direction by anticlockwise (defaulting to clockwise).
• Path2D.arcTo(): fügt einen Bogen hinzu
• Path2D.ellipse(): fügt eine Ellipse hinzu. Mittelpunkt ist die (x, y) Position mit den Radii radiusX und radiusY starting at startAngle and ending at endAngle going in the given direction by anticlockwise (defaulting to clockwise).
• Path2D.rect(): zeichnet ein Rechteck

Path2D()

Zusätzlich können Sie vorhandene Pfade mit SVG-Pfad-Daten in canvas darstellen.

Folgende Parameter sind möglich:

• path: eine Kopie eines bestehenden Pfades wird angelegt
• d: aus SVG-Pfad-Daten wird ein neuer Pfad erzeugt

Anwendungsbeispiel

ToDo (weitere ToDos)

--Matthias Scharwies (Diskussion) 05:41, 16. Jul. 2016 (CEST)

Weblinks

• WHATWG: Path2D()
• MDN: Path2D
  • MDN: Path2d()

• windows developer: support Path2D

• drweb: HTML5-Canvas: Mit „Path2D()“ Zeichenobjekte zusammenfassen und zwischenspeichern