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	Status	Comment
HTML Living Standard Path2D() の定義	現行の標準	Initial definition.

ブラウザー実装状況

BCD tables only load in the browser