Vizatimi i rrathëve përmes canvas në JavaScript

Metoda tjetër arc vizaton një hark me qendër në një pikë të caktuar. Ajo pranon parametrat në vijim: x, y, rreze r, kënd fillestar startAngle, kënd përfundimtar endAngle, vizatim në drejtim të akrepave të orës apo në drejtim të kundërt direction.

Parametri direction pranon vlerat në vijim: true e detyron të vizatojë në drejtim të akrepave të orës, false në drejtim të kundërt (si parazgjedhje).

Ndërkohë që këndet në metodën arc maten në radianë, jo në gradë. Për të kthyer gradët në radianë ju mund të përdorni funksionin në vijim:

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

Le të vizatojmë një rreth

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

Результат:

Le të vizatojmë gjysmë rrethi

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

Результат:

Le të vizatojmë gjysmë rrethi të plotë

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(); // ta ngjyrosim konturin

Результат:

Detyra praktike