Метад 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,
які малюе прамавугольнік