Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Path2D.addPath()

この翻訳は不完全です。英語から この記事を翻訳 してください。

Canvas 2D APIのPath2D.addPath()メソッドは、パスに対して引数でパスを追加します。

構文

void path.addPath(path [, transform]);

パラメーター

path
追加するPath2Dパス
transform Optional
パスに追加する変換マトリックスとして使われるSVGMatrix.

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に定義されています。

ドキュメントのタグと貢献者

 このページの貢献者: yoshioms1
 最終更新者: yoshioms1,