Disegnare cerchi tramite canvas in JavaScript

Il metodo successivo arc disegna un arco con centro in un certo punto. Accetta i seguenti parametri: x, y, raggio r, angolo iniziale startAngle, angolo finale endAngle, disegnare in senso orario o antiorario direction.

Il parametro direction accetta i seguenti valori: true fa disegnare in senso orario, false in senso antiorario (predefinito).

Inoltre, gli angoli nel metodo arc sono misurati in radianti, non in gradi. Per convertire i gradi in radianti puoi utilizzare la seguente funzione:

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

Disegniamo un cerchio

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

Результат:

Disegniamo una metà di cerchio

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

Результат:

Disegniamo una metà di cerchio piena

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(); // riempiamo il contorno

Результат:

Problemi pratici