Método arc

O método arc desenha um arco com centro em um ponto determinado, com um raio determinado. Este arco se tornará visível apenas se os métodos stroke ou fill forem aplicados. No primeiro caso, será um contorno, e no segundo - uma forma preenchida.

O último parâmetro opcional regula a direção do desenho. Ele aceita o valor true ou false. O valor true desenha o arco no sentido horário, e o valor false - no sentido anti-horário (padrão).

Você pode definir os ângulos inicial e final ao desenhar. Esses ângulos são medidos em radianos, não em graus. Para converter graus em radianos você pode usar a seguinte função:

javascriptfunction getRadians(degrees) {
  return (Math.PI / 180) * degrees;
}

Sintaxe

javascriptcontexto.arc(x, y, raio, ângulo inicial, ângulo final, [sentido = false]);

Exemplo

Vamos desenhar uma circunferência:

html<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');

ctx.arc(100, 100, 75, 0, getRadians(360));
ctx.stroke();

function getRadians(degrees) {
  return (Math.PI / 180) * degrees;
}

Результат:

Exemplo

Vamos desenhar meia circunferência:

html<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');

ctx.arc(100, 100, 75, 0, getRadians(180));
ctx.stroke();

function getRadians(degrees) {
  return (Math.PI / 180) * degrees;
}

Результат:

Exemplo

Vamos desenhar um semicírculo (preenchemos o contorno com fill):

html<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');

ctx.arc(100, 100, 75, 0, getRadians(180));
ctx.fill();

function getRadians(degrees) {
  return (Math.PI / 180) * degrees;
}

Результат:

Veja também