Path2D: addPath() メソッド
Path2D.addPath()
は Canvas 2D API のメソッドで、ある Path2D
オブジェクトを他の Path2D
オブジェクトに追加します。
構文
js
addPath(path)
addPath(path, transform)
引数
path
-
追加する
Path2D
パスです。 transform
省略可-
DOMMatrix
オブジェクトで、追加されるパスの座標変換行列として使用されます。(技術的にはDOMMatrixInit
オブジェクトです。)
返値
なし (undefined
)。
例
パスを既存のパスに追加
この例は、あるパスを他のパスに追加します。
HTML
html
<canvas id="canvas"></canvas>
JavaScript
まず、2 つの別々の Path2D
オブジェクトを作成し、それぞれに rect()
メソッドを使用して作成した長方形を含めます。次に、 DOMMatrix()
を使って行列を作成します。そして、 addPath()
を使用して 2 番目のパスを 1 番目のパスに追加し、行列を適用して 2 番目のパスを右に移動します。
最後に、 fill()
を使用して、 1 番目のパスを描画します。
js
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
関連情報
- このメソッドを定義しているインターフェイス:
Path2D