Crtanje krugova putem canvasa u JavaScript-u
Sledeća metoda arc crta luk sa
centrom u određenoj tački. Ona prihvata sledeće
parametre: x, y, poluprečnik r,
početni ugao startAngle, krajnji
ugao endAngle, crtanje u smeru ili suprotno
smeru kazaljke na satu direction.
Parametar direction prihvata sledeće vrednosti: true nalaže
crtanje u smeru kazaljke na satu, false suprotno od smera kazaljke (podrazumevano).
Pritom se uglovi u metodu arc mere u radijanima,
ne u stepenima. Za konverziju stepena u radijane
možete koristiti sledeću funkciju:
function getRadians(degrees) {
return (Math.PI / 180) * degrees;
}
Nacrtajmo krug
<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();
:
Nacrtajmo polovinu kruga
<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();
:
Nacrtajmo polovinu popunjenog kruga
<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(); // popuni konturu
:
