Ringide joonistamine canvas'i abil JavaScriptis
Järgmine meetod arc joonistab kaare
keskpunktiga teatud punktis. See võtab järgmised
parameetrid: x, y, raadius r,
algusnurk startAngle, lõppnurk
endAngle, joonistamine päri- või
vastupäeva direction.
Parameeter direction võtab järgmised väärtused: true sunnib
joonistama päripäeva, false vastupäeva (vaikimisi).
Samal ajal mõõdetakse nurki meetodis arc radiaanides,
mitte kraadides. Kraadide teisendamiseks radiaanideks
võite kasutada järgmist funktsiooni:
function getRadians(degrees) {
return (Math.PI / 180) * degrees;
}
Joonistame ringi
<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();
:
Joonistame pool ringist
<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();
:
Joonistame pool ringikujulisest objektist
<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(); // värvime kontuuri
:
