Path2D()
コンストラクターは、新たにインスタンス化した Path2D
オブジェクトを返します。他のパスを引数に渡すこともできます(複製がつくられます)。また、SVG パス からなるデータを文字列で渡すこともできます。
構文
new Path2D(); new Path2D(path); new Path2D(d);
引数
path
Optional- 他の
Path2D
オブジェクトを渡して呼び出すと、引数のpath
が複製されます。 d
Optional- SVG パス からなる文字列を渡して呼出すと、その内容のパスが新たにつくられます。
例
パスを複製してつくる
これは、Path2D
のパスを複製して作成する簡単なコードスニペットです。
<canvas id="canvas"></canvas>
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
)。
<canvas id="canvas"></canvas>
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. |
ブラウザー実装状況
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.
Update compatibility data on GitHub
デスクトップ | モバイル | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Path2D | Chrome 完全対応 あり | Edge 完全対応 あり | Firefox 完全対応 31 | IE ? | Opera 完全対応 あり | Safari 完全対応 10 | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Firefox Android 完全対応 31 | Opera Android 完全対応 あり | Safari iOS 完全対応 あり | Samsung Internet Android 完全対応 あり |
Path2D() constructor | Chrome 完全対応 あり | Edge
完全対応
あり
| Firefox 完全対応 31 | IE ? | Opera 完全対応 あり | Safari 完全対応 10 | WebView Android 未対応 なし | Chrome Android 完全対応 42 | Firefox Android 完全対応 31 | Opera Android 完全対応 あり | Safari iOS 完全対応 あり | Samsung Internet Android 完全対応 4.0 |
addPath | Chrome 完全対応 あり | Edge ? | Firefox 完全対応 34 | IE 未対応 なし | Opera 完全対応 あり | Safari 完全対応 あり | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Firefox Android 完全対応 34 | Opera Android 完全対応 あり | Safari iOS 完全対応 あり | Samsung Internet Android 完全対応 あり |
凡例
- 完全対応
- 完全対応
- 未対応
- 未対応
- 実装状況不明
- 実装状況不明
- 実験的。動作が変更される可能性があります。
- 実験的。動作が変更される可能性があります。
- 実装ノートを参照してください。
- 実装ノートを参照してください。
関連情報
Path2D
インタフェースに、このコンストラクタは属します。