1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
|
---
title: Path2D.addPath()
slug: Web/API/Path2D/addPath
translation_of: Web/API/Path2D/addPath
---
<div>{{APIRef("Canvas API")}}</div>
<p>Canvas 2D APIの<code><strong>Path2D</strong></code><strong><code>.addPath()</code></strong>メソッドは、パスに対して引数でパスを追加します。</p>
<h2 id="構文">構文</h2>
<pre class="syntaxbox">void <var><em>path</em>.addPath(path [, transform]);</var>
</pre>
<h3 id="パラメーター">パラメーター</h3>
<dl>
<dt><code>path</code></dt>
<dd>追加する{{domxref("Path2D")}}パス</dd>
<dt><code>transform</code> {{optional_inline}}</dt>
<dd>パスに追加する変換マトリックスとして使われる{{domxref("SVGMatrix")}}.</dd>
</dl>
<h2 id="例">例</h2>
<h3 id="addPathメソッドを使用する"><code>addPathメソッドを使用する</code></h3>
<p>これは<code>addPathメソッドを使用する簡単なコードスニペットです。</code></p>
<pre class="brush: js; highlight:[19]">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);
</pre>
<p>以下のコードを編集して、その変更が canvas に反映されることを確かめてください(現在のブラウザーが実際にこのメソッドをサポートしているか、以下のブラウザー互換テーブルをチェックしてください)</p>
<p>{{ EmbedLiveSample('Playable_code', 700, 500) }}</p>
<h2 id="仕様">仕様</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('HTML WHATWG', "scripting.html#dom-path2d-addpath", "Path2D.addPath()")}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td>初期定義</td>
</tr>
</tbody>
</table>
<h2 id="ブラウザー互換性">ブラウザー互換性</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatNo}}</td>
<td>{{CompatGeckoDesktop(34)}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Chrome for Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoMobile(34)}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="関連情報">関連情報</h2>
<ul>
<li>このインターフェイスは{{domxref("Path2D")}}に定義されています。</li>
</ul>
|
