From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- .../api/canvasrenderingcontext2d/arc/index.html | 138 +++++++++++++++++++++ 1 file changed, 138 insertions(+) create mode 100644 files/pt-br/web/api/canvasrenderingcontext2d/arc/index.html (limited to 'files/pt-br/web/api/canvasrenderingcontext2d/arc/index.html') 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 +--- +
{{APIRef}}
+ +

O método CanvasRenderingContext2D.arc() da API Canvas 2D adiciona um arco circular para o atual sub-caminhoa (sub-path).

+ +

Sintaxe

+ +
void ctx.arc(x, y, raio, anguloInicial, anguloFinal [, antiHorario]);
+
+ +

O método arc() cria um arco circular centralizado em (x, y) com um raio. O caminho inicia-se no anguloInicial, e finaliza no anguloFinal, e é desenhado no sentido antiHoario (o padrão é no sentido horario).

+ +

Parâmetros

+ +
+
x
+
A coordenada horizontal do centro do arco.
+
y
+
A coordenada vertical do centro do arco.
+
raio
+
O raio do arco. Deve ser um valor positivo.
+
anguloInicial
+
O ângulo em radianos em que o arco começa medido a partir do eixo x positivo.
+
anguloFinal
+
O ângulo em que o arco finaliza medido a partir do eixo x positivo.
+
antiHorario {{optional_inline}}
+
Um {{jsxref("Boolean")}} opcional. Se verdadeiro, desenha o arco no sentido anti-horário entre os ângulos inicial e final. O padrão é falso (sentido horário).
+
+ +

Examplos

+ +

Desenhando um círculo completo

+ +

O exemplo desenha um círculo completo com o método arc().

+ +

HTML

+ +
<canvas></canvas>
+
+ +

JavaScript

+ +

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°).

+ +
const canvas = document.querySelector('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.beginPath();
+ctx.arc(100, 75, 50, 0, 2 * Math.PI);
+ctx.stroke();
+
+ +

Resultado

+ +

{{ EmbedLiveSample('Drawing_a_full_circle', 700, 180) }}

+ +

Diferentes formas demonstradas

+ +

Este exemplo desenha diversas formas para mostrar o que é possível fazer com o método arc().

+ + + +
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();
+    }
+  }
+}
+ +

Resultado

+ +

{{ EmbedLiveSample('Different_shapes_demonstrated', 160, 210, "https://mdn.mozillademos.org/files/204/Canvas_arc.png") }}

+ +

Especificações

+ + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-arc", "CanvasRenderingContext2D.arc")}}{{Spec2('HTML WHATWG')}}
+ +

Compatibilidade de navegador

+ + + +

{{Compat("api.CanvasRenderingContext2D.arc")}}

+ +

Veja mais

+ + -- cgit v1.2.3-54-g00ecf