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:

javascriptfunction getRadians(degrees) {
  return (Math.PI / 180) * degrees;
}

Laten we een cirkel tekenen

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet 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

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet 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)

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

ctx.arc(100, 100, 75, 0, getRadians(180));
ctx.fill(); // vul de contour in

Результат:

Praktische opdrachten