Metoda arc

Metoda arc vizaton një hark me qendër në një pikë të caktuar, me një rreze të caktuar. Kjo hark do të bëhet i dukshëm vetëm nëse përdoren metodat stroke ose fill. Në rastin e parë do të jetë një kontur, ndërsa në të dytin - një formë.

Parametri i fundit opsional rregullon drejtimin e vizatimit. Ai pranon vlerën true ose false. Vlera true vizon harkun në drejtim të akrepave të orës, ndërsa vlera false - në drejtim të kundërt të akrepave të orës (si parazgjedhje).

Mund të përcaktohen këndet fillestare dhe përfundimtare gjatë vizatimit. Këto kënde maten në radianë, jo në shkallë. Për të kthyer shkallët në radianë mund të përdorni funksionin e mëposhtëm:

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

Sintaksa

javascriptkonteksti.arc(x, y, rrezja, këndi fillestar, këndi përfundimtar, [drejtimi = false]);

Shembull

Le të vizatojmë një rreth:

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

Результат:

Shembull

Le të vizatojmë gjysmën e një rrethi:

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

Результат:

Shembull

Le të vizatojmë gjysmën e një rrethi (do ta mbushim konturin duke përdorur fill):

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

Результат:

Shihni gjithashtu