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:

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

Dibujemos un 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();

Результат:

Dibujemos medio 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();

Результат:

Dibujemos medio círculo relleno

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(); // rellenamos el contorno

Результат:

Problemas prácticos