CanvasRenderingContext2D.arc()

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

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

Exemplos

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

Diferentes formas demonstradas

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

<canvas width="150" height="200"></canvas>

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

Especificações

Compatibilidade com navegadores

Veja mais

• A interface definindo este método: CanvasRenderingContext2D
• Utilize CanvasRenderingContext2D.ellipse() para desenhar um arco elíptico.