Dibujo de círculos a través de canvas en JavaScript
El siguiente método arc dibuja un arco con
centro en un punto determinado. Acepta los siguientes
parámetros: x, y, radio r,
ángulo inicial startAngle, ángulo
final endAngle, dibujar en el sentido de las agujas del reloj o en sentido contrario
direction.
El parámetro direction acepta los siguientes valores: true hace que
dibuje en el sentido de las agujas del reloj, false en sentido contrario (por defecto).
Además, los ángulos en el método arc se miden en radianes,
no en grados. Para convertir grados a radianes
puede utilizar la siguiente función:
function getRadians(degrees) {
return (Math.PI / 180) * degrees;
}
Dibujemos un 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();
:
Dibujemos medio 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();
:
Dibujemos medio círculo relleno
<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(); // rellenamos el contorno
:
