Path2D: Path2D()-Konstruktor

Syntax

new Path2D()
new Path2D(path)
new Path2D(d)

Parameter

path Optional

Wenn er mit einem anderen Path2D-Objekt aufgerufen wird, wird eine Kopie des path-Arguments erstellt.

d Optional

Wenn er mit einem String, der aus SVG-Pfaddaten besteht, aufgerufen wird, wird ein neuer Pfad aus dieser Beschreibung erstellt.

Beispiele

Erstellen und Kopieren von Pfaden

Dieses Beispiel erstellt und kopiert einen Path2D-Pfad. Zuerst ist path1 ein rechteckiger Pfad. Dann kopieren wir path1 in path2 und fügen einen Kreis hinzu. Schließlich zeichnen wir path2, das sowohl das Rechteck als auch den Kreis enthält. Beachten Sie, dass path1 unverändert bleibt, obwohl wir ihn nie auf der Leinwand zeichnen. Sein einziger Zweck besteht darin, zu zeigen, wie man einen komplexen Pfad erstellen kann, indem man auf bestehenden Pfaden aufbaut.

<canvas id="my-canvas"></canvas>

const canvas = document.getElementById("my-canvas");
const ctx = canvas.getContext("2d");

const path1 = new Path2D();
path1.rect(10, 10, 100, 100);

const path2 = new Path2D(path1);
path2.moveTo(220, 60);
path2.arc(170, 60, 50, 0, 2 * Math.PI);

ctx.stroke(path2);

Verwenden von SVG-Pfaden

Dieses Beispiel erstellt einen Path2D-Pfad mit SVG-Pfaddaten. Der Pfad bewegt sich zu Punkt (M10 10) und dann horizontal 80 Punkte nach rechts (h 80), dann 80 Punkte nach unten (v 80), dann 80 Punkte nach links (h -80), und schließlich zurück zum Anfang (Z).

<canvas id="my-canvas"></canvas>

const canvas = document.getElementById("my-canvas");
const ctx = canvas.getContext("2d");

const p = new Path2D("M10 10 h 80 v 80 h -80 Z");
ctx.fill(p);

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Path2D, die Schnittstelle, zu der dieser Konstruktor gehört