CanvasRenderingContext2D.arc()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

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

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

js
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

Specification
HTML
# dom-context-2d-arc-dev

Compatibilidade com navegadores

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
arc

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Veja mais