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:

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

Să desenăm un cerc

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();

Результат:

Să desenăm o jumătate de cerc

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();

Результат:

Să desenăm un semicerc

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(); // vom colora conturul

Результат:

Probleme practice