Desenhando círculos via canvas em JavaScript

O próximo método arc desenha um arco com centro em um determinado ponto. Ele aceita os seguintes parâmetros: x, y, raio r, ângulo inicial startAngle, ângulo final endAngle, desenhar no sentido horário ou anti-horário direction.

O parâmetro direction aceita os seguintes valores: true faz desenhar no sentido horário, false no sentido anti-horário (padrão).

Os ângulos no método arc 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;
}

Vamos desenhar um círculo

html<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();

Результат:

Vamos desenhar meio círculo

html<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();

Результат:

Vamos desenhar um semicírculo

html<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(); // preenche o contorno

Результат:

Problemas práticos