Методот arc

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

Последниот незадолжителен параметар регулира насока на цртање. Тој прифаќа вредност true или false. Вредноста true црта лак во насока на часовникот, а вредноста false - спротивно од часовникот (по default).

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

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,
кој црта правоаголник