Kreslenie kruhov cez canvas v JavaScripte
Nasledujúca metóda arc kreslí oblúk so
stredom v určitom bode. Prijíma nasledujúce
parametre: x, y, polomer r,
počiatočný uhol startAngle, koncový
uhol endAngle, kresliť po alebo proti
smeru hodinových ručičiek direction.
Parameter direction prijíma nasledujúce hodnoty: true spôsobí
kreslenie po smeru hodinových ručičiek, false proti smeru hodinových ručičiek (predvolené).
Uhly v metóde arc sa merajú v radiánoch,
nie v stupňoch. Na prevod stupňov na radiány
môžete použiť nasledujúcu funkciu:
function getRadians(degrees) {
return (Math.PI / 180) * degrees;
}
Nakreslime kruh
<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();
:
Nakreslime polovicu kruhu
<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();
:
Nakreslime polovicu kruhu vyplnenú
<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(); // vyplníme obrys
:
