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
|
---
title: CanvasRenderingContext2D.arc()
slug: Web/API/CanvasRenderingContext2D/arc
tags:
- Canvas
- CanvasRenderingContext2D
- Method
- Reference
translation_of: Web/API/CanvasRenderingContext2D/arc
---
<div>{{APIRef}}</div>
<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.arc()</code></strong> de l'API Canvas 2D permet d'ajouter un arc de cercle au tracé, en le centrant aux positions <em>(x, y)</em> et avec un rayon <em>r</em> qui démarre à <em>angleDépart</em> et qui finit à <em>angleFin</em>, dans la direction de <em>sensAntiHoraire </em>(par défaut en sens horaire).</p>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="syntaxbox">void <var><em>ctx</em>.arc(x, y, rayon, angleDépart, angleFin, sensAntiHoraire);</var>
</pre>
<h3 id="Paramètres">Paramètres</h3>
<dl>
<dt><code>x</code></dt>
<dd>La position en x du centre de l'arc.</dd>
<dt><code>y</code></dt>
<dd>La position en y du centre de l'arc.</dd>
<dt><code>radius</code><em> (rayon)</em></dt>
<dd>Le rayon de l'arc.</dd>
<dt><code>startAngle</code> <em>(angle départ)</em></dt>
<dd>La valeur de l'angle avec laquelle démarre l'arc de cercle, mesurée dans le sens horaire à partir de l'axe x positif et exprimé en radians.</dd>
<dt><code>endAngle</code> <em>(angle fin)</em></dt>
<dd>La valeur de l'angle avec laquelle se finit l'arc de cercle, mesurée dans le sens horaire à partir de l'axe x positif et exprimé en radians.</dd>
<dt><code>anticlockwise</code><em> (sens anti-horaire)</em> {{optional_inline}}</dt>
<dd>Un {{jsxref("Booléen")}} facultatif qui, si à <code>true</code><em>(vrai),</em> indique que l'arc sera dessiné dans le sens inverse des aiguilles d'une montre entre les deux angles. Par défaut, la valeur est le sens des aiguilles d'une montre.</dd>
</dl>
<h2 id="Exemples">Exemples</h2>
<h3 id="Using_the_arc_method">En utilisant la méthode <code>arc</code> </h3>
<p>Voici un code simple permettant de dessiner un cercle .</p>
<h4 id="HTML">HTML</h4>
<pre class="brush: html line-numbers"><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>Modifiez le code ci-dessous et voyez les changements en direct sur le canvas :</p>
<h4 id="code_jouable">Code jouable</h4>
<pre class="brush: html hidden"><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">Exemple avec différentes formes</h3>
<p>Dans cet exemple, plusieurs formes différentes sont dessinées, afin de montrer les possibilités offertes par <code>arc()</code>.</p>
<pre class="brush: html hidden"><canvas id="canvas" width="150" height="200"></canvas>
</pre>
<pre class="brush: js">var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
// Draw shapes
for (var i = 0; i < 4; i++) {
for(var j = 0; j < 3; j++) {
ctx.beginPath();
var x = 25 + j * 50; // x coordinate
var y = 25 + i * 50; // y coordinate
var radius = 20; // Arc radius
var startAngle = 0; // Starting point on circle
var endAngle = Math.PI + (Math.PI * j) /2; // End point on circle
var anticlockwise = i % 2 == 1; // Draw anticlockwise
ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
if (i > 1) {
ctx.fill();
} else {
ctx.stroke();
}
}
}</pre>
<p>{{ EmbedLiveSample('Different_shapes_demonstrated', 160, 210, "canvas_arc.png") }}</p>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Spécification</th>
<th scope="col">Statut</th>
<th scope="col">Commentaire</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="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<p>{{Compat("api.CanvasRenderingContext2D.arc")}}</p>
<h2 id="Notes_spécifiques_à_Gecko">Notes spécifiques à Gecko</h2>
<p>Avec Gecko 2.0 {{geckoRelease("2.0")}}:</p>
<ul>
<li>Le paramètre <code>anticlockwise</code> est optionnel,</li>
<li>Une valeur négative pour le rayon lance une erreur de type {{domxref("DOMError", "IndexSizeError")}} ( "L'index ou la taille est négatif ou supérieur à la valeur autorisée" ).</li>
</ul>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li>L'Interface JavaScript à laquelle appartient la méthode : {{domxref("CanvasRenderingContext2D")}}</li>
</ul>
|
