Metoda arc

Metoda arc rysuje łuk ze środkiem w określonym punkcie, o określonym promieniu. Łuk stanie się widoczny dopiero po zastosowaniu metod stroke lub fill. W pierwszym przypadku będzie to kontur, a w drugim - wypełniony kształt.

Ostatni opcjonalny parametr reguluje kierunek rysowania. Przyjmuje wartość true lub false. Wartość true rysuje łuk zgodnie z kierunkiem ruchu wskazówek zegara, a wartość false - przeciwnie do kierunku ruchu wskazówek zegara (domyślnie).

Można ustawić kąt początkowy i końcowy podczas rysowania. Kąty te mierzone są w radianach, nie w stopniach. Aby przeliczyć stopnie na radiany możesz użyć następującej funkcji:

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

Składnia

kontekst.arc(x, y, promień, kąt początkowy, kąt końcowy, [kierunek = false]);

Przykład

Narysujmy okrąg:

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

Przykład

Narysujmy połowę okręgu:

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

Przykład

Narysujmy połowę koła (wypełnijmy kontur za pomocą 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;
}

Zobacz też

metoda rect,
który rysuje prostokąt