Desenarea cercurilor prin canvas în JavaScript
Următoarea metodă arc desenează un arc cu
centrul într-un anumit punct. Ea acceptă următorii
parametri: x, y, raza r,
unghiul de început startAngle, unghiul
de sfârșit endAngle, desenarea în sensul acelor de ceasornic sau invers direction.
Parametrul direction acceptă următoarele valori: true forțează
desenarea în sensul acelor de ceasornic, false în sens invers acelor de ceasornic (implicit).
Unghiurile în metoda arc sunt măsurate în radiani,
nu în grade. Pentru a converti gradele în radiani
puteți utiliza următoarea funcție:
function getRadians(degrees) {
return (Math.PI / 180) * degrees;
}
Să desenăm un cerc
<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();
:
Să desenăm o jumătate de cerc
<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();
:
Să desenăm un semicerc
<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(); // vom colora conturul
:
