Path2D: Methode addPath()

path

Ein Path2D-Pfad, der hinzugefügt werden soll.

transform Optional

Ein DOMMatrix, das als Transformationsmatrix für den hinzuzufügenden Pfad verwendet wird. (Technisch gesehen ein Objekt, das dieselben Eigenschaften wie ein DOMMatrix-Objekt besitzt.)

Keiner (undefined).

In diesem Beispiel wird ein Pfad zu einem anderen hinzugefügt.

HTML

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

JavaScript

Zuerst erstellen wir zwei separate Path2D-Objekte, die jeweils ein Rechteck enthalten, das mit der rect()- Methode erstellt wurde. Dann erstellen wir eine Matrix mit DOMMatrix(). Wir fügen dann den zweiten Pfad dem ersten mit addPath() hinzu und wenden auch die Matrix an, um den zweiten Pfad nach rechts zu verschieben. Schließlich zeichnen wir den ersten Pfad (der nun beide Rechtecke enthält) mit fill().

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

// Create first path and add a rectangle
let p1 = new Path2D();
p1.rect(0, 0, 100, 150);

// Create second path and add a rectangle
let p2 = new Path2D();
p2.rect(0, 0, 100, 75);

// Create transformation matrix that moves 200 points to the right
let m = new DOMMatrix();
m.a = 1;
m.b = 0;
m.c = 0;
m.d = 1;
m.e = 200;
m.f = 0;

// Add second path to the first path
p1.addPath(p2, m);

// Draw the first path
ctx.fill(p1);

Ergebnis

• Die Schnittstelle, die diese Methode definiert: Path2D