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:
function getRadians(degrees) {
return (Math.PI / 180) * degrees;
}
Dairə çəkək
<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();
:
Dairənin yarısını çəkək
<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();
:
Dairənin yarısını doldurulmuş çəkək
<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(); // konturu rəngləyək
:
