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 әдісі,
тіктөртбұрыш сызады