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 August 2016.

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

ブラウザーの互換性

関連情報

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