Metode arc

Metode arc zīmē loku ar centru noteiktā punktā, noteiktā rādiusā. Šis loks kļūs redzams tikai tad, ja izmantos metodes stroke vai fill. Pirmajā gadījumā būs kontūrs, bet otrajā - aizpildīta forma.

Pēdējais neobligātais parametrs regulē zīmēšanas virzienu. Tas pieņem vērtību true vai false. Vērtība true zīmē loku pulksteņrādītāja virzienā, bet vērtība false - pretēji pulksteņrādītāja virzienam (pēc noklusējuma).

Zīmējot var iestatīt sākuma un beigu leņķi. Šie leņķi tiek mērīti radiānos, ne grādos. Lai pārveidotu grādus radiānos, varat izmantot šādu funkciju:

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

Sintakse

konteksts.arc(x, y, rādiuss, sākuma leņķis, beigu leņķis, [virziens = false]);

Piemērs

Uzzīmēsim apkārtmēru:

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

Piemērs

Uzzīmēsim pusi no apkārtmēra:

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

Piemērs

Uzzīmēsim pusi no apļa (aizpildīsim kontūru ar 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;
}

Skatiet arī

metode rect,
kura zīmē taisnstūri