Метод arc

Метод arc црта лук са центром у задатој тачки, задатим полупречником. Видивим овај лук ће постати само ако се примене методи stroke или fill. У првом случају ће бити контур, а у другом - фигура.

Последњи опциони параметар регулише смер цртања. Он прихвата вредност true или false. Вредност true црта лук у смеру казаљке на сату, а вредност false - супротно од казаљке на сату (подразумевано).

Може се задати почетни и крајњи угао при цртању. Ови углови мере се у радијанима, не у степенима. За претварање степени у радијане можете користити следећу функцију:

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

Синтакса

контекст.arc(x, y, полупречник, почетни угао, крајњи угао, [смер = false]);

Пример

Хајде да нацртамо круг:

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

Пример

Хајде да нацртамо пола круга:

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

Пример

Хајде да нацртамо пола круга (попунимо контур помоћу 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;
}

Погледајте такође

метод rect,
који црта правоугаоник