JavaScript-də canvas vasitəsilə dairə çəkmək

Növbəti metod arc müəyyən bir nöqtədə mərkəzi olan qövs çəkir. O, aşağıdakı parametrləri qəbul edir: x, y, radius r, başlanğıc bucağı startAngle, son bucaq endAngle, saat yönünde və ya əksinə çəkmək direction.

direction parametri aşağıdakı dəyərləri qəbul edir: true saat yönünde çəkməyə, false saat yönünün əksinə çəkməyə səbəb olur (standart olaraq).

Eyni zamanda, arc metodunda bucaqlar radianlarla ölçülür, dərəcələrlə deyil. Dərəcələri radianlara çevirmək üçün aşağıdakı funksiyadan istifadə edə bilərsiniz:

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

Dairə çəkək

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

Результат:

Dairənin yarısını çəkək

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

Результат:

Dairənin yarısını doldurulmuş çəkək

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(); // konturu rəngləyək

Результат:

Praktiki tapşırıqlar