Teken van sirkels deur canvas op JavaScript
Die volgende metode arc teken 'n boog met
die middelpunt by 'n sekere punt. Dit aanvaar die volgende
parameters: x, y, radius r,
beginhoek startAngle, eindhoek
endAngle, teken met of teen
kloksgewys direction.
Die parameter direction aanvaar die volgende waardes: true laat
dit met kloksgewys teken, false teen kloksgewys in (standaard).
Die hoeke in die metode arc word gemeet in radiale,
nie in grade nie. Om grade na radiale om te skakel
kan jy die volgende funksie gebruik:
function getRadians(degrees) {
return (Math.PI / 180) * degrees;
}
Kom ons teken 'n sirkel
<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();
:
Kom ons teken 'n halwe sirkel
<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();
:
Kom ons teken 'n halwe sirkel (gevul)
<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(); // vul die kontoer in
:
