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:
function getRadians(degrees) {
return (Math.PI / 180) * degrees;
}
Låt oss rita 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();
:
Låt oss rita 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();
:
Låt oss rita en halv cirkelskiva
<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(); // fyll konturen
:
