Path2D: метод addPath()

Метод Path2D.addPath() API Canvas 2D добавляет один объект Path2D к другому объекту Path2D.

path

Объект Path2D для добавления.

transform Необязательно

Матрица преобразования DOMMatrix для добавляемого пути. (Технически — объект с теми же свойствами, что и объект DOMMatrix.)

None (undefined).

В этом примере добавляется один путь к другому.

HTML

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

JavaScript

Сначала мы создаём два отдельных объекта Path2D, каждый из которых содержит прямоугольник, созданный с помощью метода rect(). Затем мы создаём матрицу с помощью DOMMatrix(). Затем мы добавляем второй путь к первому с помощью addPath(), также применяя матрицу для перемещения второго пути вправо. Наконец, мы отрисовываем первый путь (который теперь содержит оба прямоугольника) с помощью 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);

Результат

• Интерфейс, определяющий этот метод: Path2D