Risanje krogov preko canvas v JavaScript
Naslednja metoda arc riše lok s
središčem na določeni točki. Sprejme naslednje
parametre: x, y, polmer r,
začetni kot startAngle, končni
kot endAngle, risanje v smeri urinega kazalca ali
obratno direction.
Parameter direction sprejme naslednje vrednosti: true povzroči
risanje v smeri urinega kazalca, false v nasprotni smeri (privzeto).
Koti v metodi arc so merjeni v radianih,
ne v stopinjah. Za pretvorbo stopinj v radiane
lahko uporabite naslednjo funkcijo:
function getRadians(degrees) {
return (Math.PI / 180) * degrees;
}
Narišimo krog
<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();
:
Narišimo polovico kroga
<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();
:
Narišimo polovico kroga (zapolnjeno)
<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(); // zapolnimo konturo
:
