Arc metodu

arc metodu müəyyən edilmiş nöqtədə mərkəzi və müəyyən edilmiş radiusu olan qövs çəkir. Bu qövs yalnız stroke və ya fill metodlarını tətbiq etdikdə görünən olacaq. Birinci halda kontur, ikinci halda isə fiqur alınacaq.

Sonuncu isteğe bağlı parametr çəkmə istiqamətini tənzimləyir. O, true və ya false qiymətini qəbul edir. true qiyməti qövsü saat yönünde, false qiyməti isə saat yönünün əksinə çəkir (standart olaraq).

Çəkmə zamanı başlanğıc və son bucaqları təyin etmək olar. Bu bucaqlar radian ilə ölçülür, dərəcə ilə deyil. Dərəcələri radana çevirmək üçün aşağıdakı funksiyadan istifadə edə bilərsiniz:

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

Sintaksis

kontekst.arc(x, y, radius, başlanğıc bucağı, son bucaq, [istiqamət = false]);

Nümunə

Gəlin bir çevrə çəkək:

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

Nümunə

Gəlin çevrənin yarısını çəkək:

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

Nümunə

Gəlin dairənin yarısını çəkək (kön turunu fill ilə dolduraq):

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

Həmçinin bax

rect metodu,
olan düzbucaqlı çəkir