JavaScriptda canvas orqali doiralar chizish

Quyidagi arc metodi markazi ma'lum bir nuqtada bo'lgan yoy chizadi. U quyidagi parametrlarni qabul qiladi: x, y, radius r, boshlang'ich burchak startAngle, oxirgi burchak endAngle, soat yo'nalishi bo'yicha yoki unga qarshi chizish direction.

direction parametri quyidagi qiymatlarni qabul qiladi: true soat yo'nalishi bo'yicha chizishni belgilaydi, false soat yo'nalishiga qarshi (standart holatda).

Bunda arc metodidagi burchaklar radianlarda o'lchanadi, graduslarda emas. Graduslarni radianlarga o'tkazish uchun quyidagi funksiyadan foydalanishingiz mumkin:

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

Doira chizamiz

html<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();

Результат:

Doiraning yarmini chizamiz

html<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();

Результат:

Doiraning yarmini to'ldiramiz

html<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(); // konturni to'ldiramiz

Результат:

Amaliy vazifalar