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-Pfad Daten 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 ziehen wir path2, das sowohl das Rechteck als auch den Kreis enthält. Beachten Sie, dass path1 unverändert bleibt, obwohl wir es nie auf die Leinwand zeichnen. Sein einziger Zweck ist zu zeigen, wie Sie einen komplexen Pfad aufbauen können, indem Sie auf bestehenden Pfaden aufbauen.

<canvas id="canvas"></canvas>

const canvas = document.getElementById("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);

Verwendung von SVG-Pfaden

Dieses Beispiel erstellt einen Path2D Pfad unter Verwendung von SVG-Pfad Daten. 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 dann zurück zum Anfang (Z).

<canvas id="canvas"></canvas>

const canvas = document.getElementById("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