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:
function getRadians(degrees) {
return (Math.PI / 180) * degrees;
}
Vamos desenhar um círculo
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.arc(100, 100, 75, 0, getRadians(360));
ctx.stroke();
:
Vamos desenhar meio círculo
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.arc(100, 100, 75, 0, getRadians(180));
ctx.stroke();
:
Vamos desenhar um semicírculo
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.arc(100, 100, 75, 0, getRadians(180));
ctx.fill(); // preenche o contorno
:
