Meetod arc

Meetod arc joonistab kaare, mille keskpunkt on etteantud punktis ja raadius on etteantud. See kaar muutub nähtavaks ainult siis, kui rakendada meetodeid stroke või fill. Esimesel juhul saab kontuuri, teisel juhul - kujundi.

Viimane valikuline parameeter reguleerib joonistamise suunda. See võtab väärtuse true või false. Väärtus true joonistab kaare päripäeva ja väärtus false - vastupäeva (vaikimisi).

Joonistamisel saab määrata alg- ja lõppnurga. Neid nurki mõõdetakse radiaanides, mitte kraadides. Kraadide teisendamiseks radiaanideks võite kasutada järgmist funktsiooni:

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

Süntaks

kontekst.arc(x, y, raadius, algusnurk, lõppnurk, [suund = false]);

Näide

Joonistame ringjoone:

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

Näide

Joonistame pool ringjoont:

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

Näide

Joonistame pool ringi (täidame kontuuri meetodiga 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;
}

Vaata ka

meetod rect,
mis joonistab ristküliku