Path2D: Path2D() コンストラクター
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()
コンストラクターは、新たにインスタンス化した Path2D
オブジェクトを返します。他のパスを引数に渡すこともできます(複製がつくられます)。また、SVG パスからなるデータを文字列で渡すこともできます。
構文
js
new Path2D()
new Path2D(path)
new Path2D(d)
引数
例
パスを複製してつくる
これは、Path2D
のパスを複製して作成する簡単なコードスニペットです。
js
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
)。
js
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
インターフェイスに、このコンストラクターは属します。