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 # dom-path2d-dev |
ブラウザーの互換性
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Path2D() constructor |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- See implementation notes.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
関連情報
Path2D
インターフェイスに、このコンストラクターは属します。