Arc metodi

arc metodi berilgan markaz nuqtasi va radius bilan yoy chizadi. Bu yoy faqat stroke yoki fill metodlarini qo'llash orqali ko'rinadi. Birinchi holda kontur, ikkinchi holda esa - shakl hosil bo'ladi.

Oxirgi ixtiyoriy parametr chizish yo'nalishini boshqaradi. U true yoki false qiymatlarini qabul qiladi. true qiymati yoyni soat yo'nalishi bo'yicha, false qiymati esa soat yo'nalishiga teskari chizadi (standart holatda).

Chizishda boshlang'ich va tugash burchaklarini belgilash mumkin. Bu burchaklar radianlarda o'lchanadi, graduslarda emas. Graduslarni radianga o'tkazish uchun quyidagi funksiyadan foydalanishingiz mumkin:

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

Sintaksis

kontekst.arc(x, y, radius, boshlang'ich burchak, tugash burchagi, [yo'nalish = false]);

Misol

Keling, aylana chizamiz:

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

Misol

Keling, aylananing yarmini chizamiz:

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

Misol

Keling, doiraning yarmini chizamiz (konturni fill yordamida to'ldiramiz):

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

Shuningdek qarang

rect metodi,
to'rtburchak chizadi