Path2D: Path2D() コンストラクター
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2016年8月以降、すべてのブラウザーで利用可能です。
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);
仕様書
| 仕様書 |
|---|
| HTML # dom-path2d-dev |
ブラウザーの互換性
関連情報
Path2Dインターフェイスに、このコンストラクターは属します。