initial commit

1 files changed, 138 insertions, 0 deletions

diff --git a/files/pt-br/web/api/canvasrenderingcontext2d/arc/index.html b/files/pt-br/web/api/canvasrenderingcontext2d/arc/index.html
new file mode 100644
index 0000000000..763831af7d
--- /dev/null
+++ b/files/pt-br/web/api/canvasrenderingcontext2d/arc/index.html
@@ -0,0 +1,138 @@
+---
+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">&lt;canvas&gt;&lt;/canvas&gt;
+</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">&lt;canvas width="150" height="200"&gt;&lt;/canvas&gt;
+</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 &lt;= 3; i++) {
+  for (let j = 0; j &lt;= 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 &gt; 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="Compatibilidade_de_navegador">Compatibilidade de navegador</h2>
+
+<div class="hidden">A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você quiser constribuir com os dados, por favor acesse o link <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e nos envie um <em>pull request</em>.</div>
+
+<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>