Path2D: Path2D() Konstruktor
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since August 2016.
Hinweis: Diese Funktion ist in Web Workers verfügbar.
Der Path2D() Konstruktor gibt ein neu instanziiertes
Path2D-Objekt zurück, optional mit einem anderen Pfad als Argument (erstellt eine
Kopie) oder optional mit einer Zeichenkette, die aus SVG-Pfad-Daten besteht.
Syntax
new Path2D()
new Path2D(path)
new Path2D(d)
Parameter
pathOptional-
Wenn mit einem anderen
Path2D-Objekt aufgerufen, wird eine Kopie despath-Arguments erstellt. dOptional-
Wenn mit einer Zeichenkette, die aus SVG-Pfad-Daten besteht, aufgerufen, wird ein neuer Pfad aus dieser Beschreibung erstellt.
Beispiele
Erstellen und Kopieren von Pfaden
Dieses Beispiel erstellt und kopiert einen Path2D-Pfad.
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
let path1 = new Path2D();
path1.rect(10, 10, 100, 100);
let 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 wird zum Punkt (M10 10) bewegt 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 Start (Z).
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
let p = new Path2D("M10 10 h 80 v 80 h -80 Z");
ctx.fill(p);
Spezifikationen
| Specification |
|---|
| HTML # dom-path2d-dev |
Browser-Kompatibilität
Siehe auch
Path2D, das Interface, zu dem dieser Konstruktor gehört