Cirkels tekenen via canvas in JavaScript
De volgende methode arc tekent een boog met
het middelpunt op een bepaald punt. Het accepteert de volgende
parameters: x, y, straal r,
starthoek startAngle, eindhoek
endAngle, tekenen met of tegen de
klok in direction.
De parameter direction accepteert de volgende waarden: true zorgt ervoor
dat er met de klok mee wordt getekend, false tegen de klok in (standaard).
De hoeken in de methode arc worden gemeten in radialen,
niet in graden. Om graden om te zetten in radialen
kunt u de volgende functie gebruiken:
function getRadians(degrees) {
return (Math.PI / 180) * degrees;
}
Laten we een cirkel tekenen
<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();
:
Laten we een halve cirkel tekenen
<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();
:
Laten we een halve cirkel tekenen (opgevuld)
<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 de contour in
:
