Path2D()

これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

Path2D() コンストラクターは、新たにインスタンス化した Path2D オブジェクトを返します。他のパスを引数に渡すこともできます(複製がつくられます)。また、SVG パス からなるデータを文字列で渡すこともできます。

構文

new Path2D();
new Path2D(path);
new Path2D(d);

引数

path Optional
他のPath2D オブジェクトを渡して呼び出すと、引数の path が複製されます。
d Optional
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.

ブラウザー実装状況

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
Path2D
実験的
Chrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 31IE ? Opera 完全対応 ありSafari 完全対応 10WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 31Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
Path2D() constructor
実験的
Chrome 完全対応 ありEdge 完全対応 あり
補足
完全対応 あり
補足
補足 The constructor for Path2D objects in Edge does not support being invoked with a string consisting of SVG path data. See issue 8438884 for details.
Firefox 完全対応 31IE ? Opera 完全対応 ありSafari 完全対応 10WebView Android 未対応 なしChrome Android 完全対応 42Firefox Android 完全対応 31Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 4.0
addPath
実験的
Chrome 完全対応 ありEdge ? Firefox 完全対応 34IE 未対応 なしOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 34Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。

関連情報

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