Metod arc

Metod arc crta luk sa centrom u zadatoj tački, zadatim poluprečnikom. Vidljivim će ovaj luk postati samo ako primenite metode stroke ili fill. U prvom slučaju biće kontur, a u drugom - figura.

Poslednji opcioni parametar reguliše pravac crtanja. On prima vrednost true ili false. Vrednost true crta luk u smeru kazaljke na satu, a vrednost false - suprotno od kazaljke na satu (podrazumevano).

Možete zadati početni i krajnji ugao prilikom crtanja. Ovi uglovi se mere u radijanima, ne u stepenima. Za pretvaranje stepena u radijane možete koristiti sledeću funkciju:

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

Sintaksa

kontekst.arc(x, y, poluprečnik, početni ugao, krajnji ugao, [pravac = false]);

Primer

Hajde da nacrtamo kružnicu:

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

Primer

Hajde da nacrtamo polovinu kružnice:

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

Primer

Hajde da nacrtamo polovinu kruga (popunimo kontur pomoću 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;
}

Pogledajte takođe

metod rect,
koji crta pravougaonik