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:
function getRadians(degrees) {
return (Math.PI / 180) * degrees;
}
Lad os tegne en cirkel
<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();
:
Lad os tegne en halv cirkel
<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();
:
Lad os tegne en halv cirkel (udfyldt)
<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(); // udfyld omridset
:
