Ympyröiden piirtäminen canvasin avulla JavaScriptissä
Seuraava metodi arc piirtää kaaren, jonka
keskipiste on tietyssä pisteessä. Se ottaa seuraavat
parametrit: x, y, säde r,
aloituskulma startAngle, lopetuskulma
endAngle, piirtääkö myötä- vai vastapäivään
direction.
Parametri direction hyväksyy seuraavat arvot: true pakottaa
piirtämään myötäpäivään, false vastapäivään (oletusarvoisesti).
Samalla kulmat metodissa arc mitataan radiaaneina,
ei asteina. Asteiden muuntamiseksi radiaaneiksi
voit käyttää seuraavaa funktiota:
function getRadians(degrees) {
return (Math.PI / 180) * degrees;
}
Piirretään ympyrä
<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();
:
Piirretään puoli ympyrää
<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();
:
Piirretään puoli ympyrän täytettä
<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(); // täytetään ääriviiva
:
