Tegning av sirkler via canvas i JavaScript

Følgende metode arc tegner en bue med sentrum i et punkt. Den tar følgende parametre: x, y, radius r, startvinkel startAngle, sluttvinkel endAngle, tegne med eller mot klokken direction.

Parameteren direction tar følgende verdier: true får den til å tegne med klokken, false mot klokken (standard).

Vinkler i metoden arc måles i radianer, ikke i grader. For å konvertere grader til radianer kan du bruke følgende funksjon:

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

La oss tegne en sirkel

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();

Результат:

La oss tegne en halv sirkel

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();

Результат:

La oss tegne en halv sirkel fylt

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(); // fyll konturen

Результат:

Praktiske oppgaver