Metoda arc

Metoda arc desenează un arc cu centrul într-un punct dat, cu o rază dată. Acest arc va deveni vizibil doar dacă se aplică metodele stroke sau fill. În primul caz va fi contur, iar în al doilea - o formă.

Ultimul parametru opțional reglează direcția de desenare. Acesta acceptă valoarea true sau false. Valoarea true desenează arcul în sensul acelor de ceasornic, iar valoarea false - în sens invers acelor de ceasornic (implicit).

Puteți seta unghiurile de început și de sfârșit la desenare. Aceste unghiuri sunt măsurate în radiani, nu în grade. Pentru a converti gradele în radiani puteți utiliza următoarea funcție:

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

Sintaxă

context.arc(x, y, rază, unghi de start, unghi de sfârșit, [direcție = false]);

Exemplu

Să desenăm un cerc:

<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;
}

Exemplu

Să desenăm o jumătate de cerc:

<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;
}

Exemplu

Să desenăm o jumătate de cerc (umplem conturul cu 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;
}

Vezi și

metoda rect,
care desenează un dreptunghi