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:
function getRadians(degrees) {
return (Math.PI / 180) * degrees;
}
Le të vizatojmë një rreth
<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();
:
Le të vizatojmë gjysmë rrethi
<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();
:
Le të vizatojmë gjysmë rrethi të plotë
<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(); // ta ngjyrosim konturin
:
