この翻訳は不完全です。英語から この記事を翻訳 してください。
Canvas 2D APIのPath2D
.addPath()
メソッドは、パスに対して引数でパスを追加します。
構文
void path.addPath(path [, transform]);
パラメーター
例
addPathメソッドを使用する
これはaddPathメソッドを使用する簡単なコードスニペットです。
var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); // rectで新しいパスを作成する var p1 = new Path2D(); p1.rect(0,0,100,100); // rectで別のパスを作成する var p2 = new Path2D(); p2.rect(0,0,100,100); // 右に縦300ポイント移動する変換マトリックスを作成する var m = document.createElementNS("https://www.w3.org/2000/svg", "svg").createSVGMatrix(); m.a = 1; m.b = 0; m.c = 0; m.d = 1; m.e = 300; m.f = 0; // 2番目のパスを最初のパスに追加する p1.addPath(p2, m); // 最後に、1番目のパスをキャンバスに描画する ctx.fill(p1);
以下のコードを編集して、その変更が canvas に反映されることを確かめてください(現在のブラウザーが実際にこのメソッドをサポートしているか、以下のブラウザー互換テーブルをチェックしてください)
仕様
Specification | Status | Comment |
---|---|---|
WHATWG HTML Living Standard Path2D.addPath() の定義 |
現行の標準 | 初期定義 |
ブラウザー互換性
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 未サポート | 34 (34) | 未サポート | (有) | 未サポート |
Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | (有) | (有) | 34.0 (34) | 未サポート | (有) | 未サポート |
関連情報
- このインターフェイスは
Path2D
に定義されています。