Tegning af cirkler via canvas i JavaScript

Følgende metode arc tegner en bue med centrum i et bestemt punkt. Den tager følgende parametre: x, y, radius r, startvinkel startAngle, slutvinkel endAngle, tegne med eller mod uret direction.

Parameteren direction tager følgende værdier: true får den til at tegne med uret, false mod uret (som standard).

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

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

Lad os tegne en cirkel

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

Результат:

Lad os tegne en halv cirkel

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

Результат:

Lad os tegne en halv cirkel (udfyldt)

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(); // udfyld omridset

Результат:

Praktiske opgaver