Path2D()
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
Path2D()
コンストラクターは、新たにインスタンス化した Path2D
オブジェクトを返します。他のパスを引数に渡すこともできます(複製がつくられます)。また、SVG パス からなるデータを文字列で渡すこともできます。
構文
new Path2D(); new Path2D(path); new Path2D(d);
引数
path
省略可-
他の
Path2D
オブジェクトを渡して呼び出すと、引数のpath
が複製されます。 d
省略可-
SVG パス からなる文字列を渡して呼出すと、その内容のパスが新たにつくられます。
例
パスを複製してつくる
これは、Path2D
のパスを複製して作成する簡単なコードスニペットです。
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);
SVG パスを使用する
これは、SVG パスデータ を使用して Path2D
のパスを作成する簡単なコードスニペットです。パスは点 (M10 10
) に移ってから、水平に 80 ポイント右に移動し (h 80
)、80 ポイント下がり (v 80
)、80 ポイント左に移動し (h -80
)、開始点に戻ります (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);
仕様
Specification |
---|
HTML Standard # dom-path2d-dev |
ブラウザー実装状況
BCD tables only load in the browser
関連情報
Path2D
インタフェースに、このコンストラクタは属します。