Apskritimų piešimas per canvas JavaScript
Kitas metodas arc piešia lanką su
centru tam tikrame taške. Jis priima šiuos
parametrus: x, y, spindulys r,
pradinis kampas startAngle, galutinis
kampas endAngle, piešti pagal arba prieš
laikrodžio rodyklę direction.
Parametras direction priima šias reikšmes: true verčia
piešti pagal laikrodžio rodyklę, false prieš laikrodžio rodyklę (numatytasis).
Be to, kampai metode arc matuojami radianais,
ne laipsniais. Norėdami konvertuoti laipsnius į radianus
galite naudoti šią funkciją:
function getRadians(degrees) {
return (Math.PI / 180) * degrees;
}
Nupieškime apskritimą
<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();
:
Nupieškime pusę apskritimo
<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();
:
Nupieškime pusę apskritimo užpildytą
<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(); // užpildykime kontūrą
:
