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
|
---
title: CanvasRenderingContext2D.arc()
slug: Web/API/CanvasRenderingContext2D/arc
tags:
- API
- Arco
- Canvas
- CanvasRenderingContext2D
- Circulo
- Method
- Reference
translation_of: Web/API/CanvasRenderingContext2D/arc
---
<div>{{APIRef}}</div>
<p><span class="seoSummary">O método <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.arc()</code></strong> da API Canvas 2D adiciona um arco circular para o atual sub-caminhoa (<em>sub-path</em>).</span></p>
<h2 id="Sintaxe">Sintaxe</h2>
<pre class="syntaxbox notranslate">void <em>ctx</em>.arc(<em>x</em>, <em>y</em>, <em>raio</em>, <em>anguloInicial</em>, <em>anguloFinal</em> [, <em>antiHorario</em>]);
</pre>
<p>O método <code>arc()</code> cria um arco circular centralizado em <code>(x, y)</code> com um <code>raio</code>. O caminho inicia-se no <code>anguloInicial</code>, e finaliza no <code>anguloFinal</code>, e é desenhado no sentido <code>antiHoario</code> (o padrão é no sentido horario).</p>
<h3 id="Parâmetros">Parâmetros</h3>
<dl>
<dt><code>x</code></dt>
<dd>A coordenada horizontal do centro do arco.</dd>
<dt><code>y</code></dt>
<dd>A coordenada vertical do centro do arco.</dd>
<dt><code>raio</code></dt>
<dd>O raio do arco. Deve ser um valor positivo.</dd>
<dt><code>anguloInicial</code></dt>
<dd>O ângulo em radianos em que o arco começa medido a partir do eixo x positivo.</dd>
<dt><code>anguloFinal</code></dt>
<dd>O ângulo em que o arco finaliza medido a partir do eixo x positivo.</dd>
<dt><code>antiHorario</code> {{optional_inline}}</dt>
<dd>Um {{jsxref("Boolean")}} opcional. Se <code>verdadeiro</code>, desenha o arco no sentido anti-horário entre os ângulos inicial e final. O padrão é <code>falso</code> (sentido horário).</dd>
</dl>
<h2 id="Examplos">Examplos</h2>
<h3 id="Desenhando_um_círculo_completo">Desenhando um círculo completo</h3>
<p>O exemplo desenha um círculo completo com o método <code>arc()</code>.</p>
<h4 id="HTML">HTML</h4>
<pre class="brush: html notranslate"><canvas></canvas>
</pre>
<h4 id="JavaScript">JavaScript</h4>
<p>O arco recebe 100 como uma coordenada x, e 75 como uma coordenada y e um raio de 50. para fazer um círculo completo, o arco inicia no ângulo 0 (0º) em radianos e finaliza em um ângulo de 2π radianos (360<strong>°</strong>).</p>
<pre class="brush: js; highlight:[5] notranslate">const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.stroke();
</pre>
<h4 id="Resultado">Resultado</h4>
<p>{{ EmbedLiveSample('Drawing_a_full_circle', 700, 180) }}</p>
<h3 id="Diferentes_formas_demonstradas">Diferentes formas demonstradas</h3>
<p>Este exemplo desenha diversas formas para mostrar o que é possível fazer com o método <code>arc()</code>.</p>
<div class="hidden">
<h4 id="HTML_2">HTML</h4>
<pre class="brush: html notranslate"><canvas width="150" height="200"></canvas>
</pre>
<h4 id="JavaScript_2">JavaScript</h4>
</div>
<pre class="brush: js notranslate">const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
// Draw shapes
for (let i = 0; i <= 3; i++) {
for (let j = 0; j <= 2; j++) {
ctx.beginPath();
let x = 25 + j * 50; // coordenada x
let y = 25 + i * 50; // coordenada y
let radius = 20; // raio
let startAngle = 0; // angulo inicial
let endAngle = Math.PI + (Math.PI * j) / 2; // angulo final
let anticlockwise = i % 2 == 1; // sentido anti-horário
ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
if (i > 1) {
ctx.fill();
} else {
ctx.stroke();
}
}
}</pre>
<h4 id="Resultado_2">Resultado</h4>
<p>{{ EmbedLiveSample('Different_shapes_demonstrated', 160, 210, "https://mdn.mozillademos.org/files/204/Canvas_arc.png") }}</p>
<h2 id="Especificações">Especificações</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Especificação</th>
<th scope="col">Status</th>
<th scope="col">Comentário</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="Browser_compatibility">Compatibilidade com navegadores</h2>
<p>{{Compat("api.CanvasRenderingContext2D.arc")}}</p>
<h2 id="Veja_mais">Veja mais</h2>
<ul>
<li>A interface definindo este método: {{domxref("CanvasRenderingContext2D")}}</li>
<li>Utilize {{domxref("CanvasRenderingContext2D.ellipse()")}} para desenhar um arco elíptico.</li>
</ul>
|
