Rysowanie okręgów za pomocą canvas w JavaScript
Następująca metoda arc rysuje łuk o
środku w pewnym punkcie. Przyjmuje następujące
parametry: x, y, promień r,
kąt początkowy startAngle, kąt końcowy
endAngle, rysowanie zgodnie lub przeciwnie
do ruchu wskazówek zegara direction.
Parametr direction przyjmuje następujące wartości: true powoduje
rysowanie zgodnie z ruchem wskazówek zegara, false przeciwnie do ruchu wskazówek zegara (domyślnie).
Przy czym kąty w metodzie arc mierzy się w radianach,
nie w stopniach. Aby przeliczyć stopnie na radiany
możesz użyć następującej funkcji:
function getRadians(degrees) {
return (Math.PI / 180) * degrees;
}
Narysujmy okrąg
<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();
:
Narysujmy połowę okręgu
<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();
:
Narysujmy półkole
<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(); // wypełnijmy kontur
:
