Path2D: addPath() メソッド

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Path2D.addPath() は Canvas 2D API のメソッドで、ある Path2D オブジェクトを他の Path2D オブジェクトに追加します。

構文

addPath(path)
addPath(path, transform)

引数

path: 追加する Path2D パスです。
transform 省略可: DOMMatrix オブジェクトで、追加されるパスの座標変換行列として使用されます。（技術的には DOMMatrixInit オブジェクトです。）

例

パスを既存のパスに追加

この例は、あるパスを他のパスに追加します。

HTML

html

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

JavaScript

まず、2 つの別々の Path2D オブジェクトを作成し、それぞれに rect() メソッドを使用して作成した長方形を含めます。次に、 DOMMatrix() を使って行列を作成します。そして、 addPath() を使用して 2 番目のパスを 1 番目のパスに追加し、行列を適用して 2 番目のパスを右に移動します。最後に、 fill() を使用して、 1 番目のパスを描画します。

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

// rect で新しいパスを作成する
let p1 = new Path2D();
p1.rect(0, 0, 100, 150);

// rect で別のパスを作成する
let p2 = new Path2D();
p2.rect(0, 0, 100, 75);

// 右に縦 300 ポイント移動する変換行列を作成する
let m = new DOMMatrix();
m.a = 1;
m.b = 0;
m.c = 0;
m.d = 1;
m.e = 200;
m.f = 0;

// 2 番目のパスを最初のパスに追加する
p1.addPath(p2, m);

// 最後に、 1 番目のパスをキャンバスに描画する
ctx.fill(p1);

結果

仕様書

Specification
HTML Standard # dom-path2d-addpath-dev

ブラウザーの互換性

BCD tables only load in the browser