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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
|
---
title: CanvasRenderingContext2D.arc()
slug: Web/API/CanvasRenderingContext2D/arc
tags:
- API
- Canvas
- CanvasRenderingContext2D
- Method
- Reference
translation_of: Web/API/CanvasRenderingContext2D/arc
---
<div>{{APIRef}}</div>
<p>Canvas 2D APIの<strong><code>CanvasRenderingContext2D.arc()</code></strong>メソッドは、パスに円弧を加えます。円弧の中心座標は<em>(x, y)</em>で半径が<em>r</em>、角度<em>startAngle</em>から<em>endAngle</em>まで、<em>anticlockwise</em>の向きに描かれます(デフォルトは時計回り)。</p>
<h2 id="構文">構文</h2>
<pre class="syntaxbox">void <var><em>ctx</em>.arc(x, y, radius, startAngle, endAngle [, anticlockwise]);</var>
</pre>
<h3 id="引数">引数</h3>
<dl>
<dt><code>x</code></dt>
<dd>円弧の中心のx座標値。</dd>
<dt><code>y</code></dt>
<dd>円弧の中心のy座標値。</dd>
<dt><code>radius</code></dt>
<dd>円弧の半径。</dd>
<dt><code>startAngle</code></dt>
<dd>円弧の始まりの角度。x軸の正方向から時計回りに定められるラジアン角。</dd>
<dt><code>endAngle</code></dt>
<dd>円弧の終わりの角度。x軸の正方向から時計回りに定められるラジアン角。</dd>
<dt><code>anticlockwise</code> {{optional_inline}}</dt>
<dd>省略可能な{{jsxref("Boolean")}}。<code>true</code>は、円弧を反時計回りに始まりから終わりの角度に向けて描きます。デフォルトは時計回り。</dd>
</dl>
<h2 id="例">例</h2>
<h3 id="Using_the_arc_method" name="Using_the_arc_method"><code>arc()</code>メソッドの使い方</h3>
<p>このコードは、単純な円の描き方を示しています。</p>
<h4 id="HTML">HTML</h4>
<pre class="brush: html"><canvas id="canvas"></canvas>
</pre>
<h4 id="JavaScript">JavaScript</h4>
<pre class="brush: js">var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(75, 75, 50, 0, 2 * Math.PI);
ctx.stroke();
</pre>
<p>以下のコードを書き替えると、Canvasの中身がどう変わるか実際に確かめられます。</p>
<div style="display: none;">
<h6 id="Playable_code" name="Playable_code">Playable code</h6>
<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
<input id="edit" type="button" value="Edit" />
<input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.beginPath();
ctx.arc(50, 50, 50, 0, 2 * Math.PI, false);
ctx.stroke();</textarea>
</pre>
<pre class="brush: js">var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;
function drawCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
eval(textarea.value);
}
reset.addEventListener("click", function() {
textarea.value = code;
drawCanvas();
});
edit.addEventListener("click", function() {
textarea.focus();
})
textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);
</pre>
</div>
<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
<h3 id="Different_shapes_demonstrated" name="Different_shapes_demonstrated">異なった形状の実例</h3>
<p>以下の例は異なった形を描くことで、<code>arc()()</code>メソッドは何ができるのかを示します。</p>
<div style="display: none;">
<h6 id="HTML_2">HTML</h6>
<pre class="brush: html"><canvas id="canvas" width="150" height="200"></canvas>
</pre>
<h6 id="JavaScript_2">JavaScript</h6>
</div>
<pre class="brush: js">var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
// 形状を描く
// (訳注:横に 180, 270, 360 度の円を3つずつ、縦に時計回りか反時計回りにパスを引いたときの stroke() と fill() を示しています)
for (var i = 0; i < 4; i++) {
for(var j = 0; j < 3; j++) {
ctx.beginPath();
var x = 25 + j * 50; // x座標
var y = 25 + i * 50; // y座標
var radius = 20; // 円弧の半径
var startAngle = 0; // 円弧の開始角
var endAngle = Math.PI + (Math.PI * j) /2; // 円弧の終了角
var anticlockwise = i % 2 == 1; // 時計回りか反時計回りか
ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
if (i > 1) {
ctx.fill();
} else {
ctx.stroke();
}
}
}</pre>
<p>{{ EmbedLiveSample('Different_shapes_demonstrated', 160, 210, "https://mdn.mozillademos.org/files/204/Canvas_arc.png") }}</p>
<h2 id="仕様">仕様</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">仕様</th>
<th scope="col">状況</th>
<th scope="col">コメント</th>
</tr>
<tr>
<td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-arc", "CanvasRenderingContext2D.arc")}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="ブラウザの互換性">ブラウザの互換性</h2>
<p>{{Compat("api.CanvasRenderingContext2D.arc")}}</p>
<h2 id="Geckoについての注釈">Geckoについての注釈</h2>
<p>Gecko 2.0{{geckoRelease("2.0")}}より:</p>
<ul>
<li>引数<code>anticlockwise</code>は省略できます。</li>
<li>負の半径を与えると{{domxref("DOMError", "IndexSizeError")}}のエラーが起こります("Index or size is negative or greater than the allowed amount"(インデックスまたはサイズが負数か、範囲を超えた値です)).</li>
</ul>
<h2 id="参考情報">参考情報</h2>
<ul>
<li>このメソッドのインターフェース {{domxref("CanvasRenderingContext2D")}}</li>
</ul>
|
