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:

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

Sintaksis

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

Misol

Keling, aylana chizamiz:

html<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet 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:

html<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet 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):

html<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet 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