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:
function getRadians(degrees) {
return (Math.PI / 180) * degrees;
}
Disegniamo un cerchio
<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();
:
Disegniamo una metà di cerchio
<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();
:
Disegniamo una metà di cerchio piena
<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(); // riempiamo il contorno
:
