From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/api/path2d/addpath/index.html | 131 +++++++++++++++++++++++++++++ 1 file changed, 131 insertions(+) create mode 100644 files/ja/web/api/path2d/addpath/index.html (limited to 'files/ja/web/api/path2d/addpath') diff --git a/files/ja/web/api/path2d/addpath/index.html b/files/ja/web/api/path2d/addpath/index.html new file mode 100644 index 0000000000..8cbf67ef2f --- /dev/null +++ b/files/ja/web/api/path2d/addpath/index.html @@ -0,0 +1,131 @@ +--- +title: Path2D.addPath() +slug: Web/API/Path2D/addPath +translation_of: Web/API/Path2D/addPath +--- +
{{APIRef("Canvas API")}}
+ +

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

+ +

構文

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

パラメーター

+ +
+
path
+
追加する{{domxref("Path2D")}}パス
+
transform {{optional_inline}}
+
パスに追加する変換マトリックスとして使われる{{domxref("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("http://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 に反映されることを確かめてください(現在のブラウザーが実際にこのメソッドをサポートしているか、以下のブラウザー互換テーブルをチェックしてください)

+ +

{{ EmbedLiveSample('Playable_code', 700, 500) }}

+ +

仕様

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-path2d-addpath", "Path2D.addPath()")}}{{Spec2('HTML WHATWG')}}初期定義
+ +

ブラウザー互換性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatNo}}{{CompatGeckoDesktop(34)}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(34)}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
+
+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf