Arc metodu

arc metodu müəyyən edilmiş nöqtədə mərkəzi və müəyyən edilmiş radiusu olan qövs çəkir. Bu qövs yalnız stroke və ya fill metodlarını tətbiq etdikdə görünən olacaq. Birinci halda kontur, ikinci halda isə fiqur alınacaq.

Sonuncu isteğe bağlı parametr çəkmə istiqamətini tənzimləyir. O, true və ya false qiymətini qəbul edir. true qiyməti qövsü saat yönünde, false qiyməti isə saat yönünün əksinə çəkir (standart olaraq).

Çəkmə zamanı başlanğıc və son bucaqları təyin etmək olar. Bu bucaqlar radian ilə ölçülür, dərəcə ilə deyil. Dərəcələri radana çevirmək üçün aşağıdakı funksiyadan istifadə edə bilərsiniz:

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

Sintaksis

javascriptkontekst.arc(x, y, radius, başlanğıc bucağı, son bucaq, [istiqamət = false]);

Nümunə

Gəlin bir çevrə çəkək:

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

Результат:

Nümunə

Gəlin çevrənin yarısını çəkək:

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

Результат:

Nümunə

Gəlin dairənin yarısını çəkək (kön turunu fill ilə dolduraq):

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

Результат:

Həmçinin bax