CanvasRenderingContext2D.arc()

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

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

ScreenshotLive sample

Especificações

Compatibilidade com navegadores

BCD tables only load in the browser

Veja mais