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)

引数

path 省略可

他のPath2D オブジェクトを渡して呼び出すと、引数の path が複製されます。

d 省略可

SVG パスを構成する文字列を渡して呼出すと、その内容のパスが新たにつくられます。

パスを複製してつくる

これは、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
# dom-path2d-dev

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Path2D() constructor

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

関連情報

  • Path2D インターフェイスに、このコンストラクターは属します。