Apļu zīmēšana izmantojot canvas uz JavaScript
Nākamā metode arc zīmē loku ar
centru noteiktā punktā. Tā pieņem šādus
parametrus: x, y, rādiuss r,
sākuma leņķis startAngle, beigu
leņķis endAngle, zīmēt pa vai pret
pulksteņa rādītāja virzienu direction.
Parametrs direction pieņem šādas vērtības: true liek
zīmēt pa pulksteņa rādītāja virzienu, false pret pulksteņa rādītāja virzienu (pēc noklusējuma).
Šajā gadījumā leņķi metodē arc mēra radiānos,
ne grādos. Lai pārvērstu grādus radiānos
varat izmantot šādu funkciju:
function getRadians(degrees) {
return (Math.PI / 180) * degrees;
}
Uzzīmēsim apli
<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();
:
Uzzīmēsim pusi apļa
<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();
:
Uzzīmēsim pusi riņķa
<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(); // aizpildīsim kontūru
:
