Metodo arc

Il metodo arc disegna un arco con centro in un punto dato, con un raggio dato. Questo arco diventerà visibile solo se si applicano i metodi stroke o fill. Nel primo caso ci sarà un contorno, nel secondo - una figura piena.

L'ultimo parametro opzionale regola la direzione del disegno. Accetta un valore true o false. Il valore true disegna l'arco in senso orario, mentre il valore false - in senso antiorario (predefinito).

È possibile impostare l'angolo iniziale e finale durante il disegno. Questi angoli 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;
}

Sintassi

contesto.arc(x, y, raggio, angoloIniziale, angoloFinale, [direzione = false]);

Esempio

Disegniamo una circonferenza:

<canvas id="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();

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

Esempio

Disegniamo mezza circonferenza:

<canvas id="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();

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

Esempio

Disegniamo un semicerchio (riempiamo il contorno con fill):

<canvas id="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();

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

Vedi anche

metodo rect,
che disegna un rettangolo