Rita cirklar via canvas i JavaScript

Följande metod arc ritar en båge med centrum vid en viss punkt. Den accepterar följande parametrar: x, y, radie r, startvinkel startAngle, slutvinkel endAngle, rita med eller mot ursprung direction.

Parametern direction accepterar följande värden: true får dig att rita medurs, false moturs (som standard).

Vinklarna i metoden arc mäts i radianer, inte i grader. För att konvertera grader till radianer kan du använda följande funktion:

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

Låt oss rita 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();

Результат:

Låt oss rita 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();

Результат:

Låt oss rita en halv cirkelskiva

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

Результат:

Praktiska uppgifter