Crtanje krugova putem canvasa u JavaScript-u

Sledeća metoda arc crta luk sa centrom u određenoj tački. Ona prihvata sledeće parametre: x, y, poluprečnik r, početni ugao startAngle, krajnji ugao endAngle, crtanje u smeru ili suprotno smeru kazaljke na satu direction.

Parametar direction prihvata sledeće vrednosti: true nalaže crtanje u smeru kazaljke na satu, false suprotno od smera kazaljke (podrazumevano).

Pritom se uglovi u metodu arc mere u radijanima, ne u stepenima. Za konverziju stepena u radijane možete koristiti sledeću funkciju:

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

Nacrtajmo krug

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

Результат:

Nacrtajmo polovinu kruga

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

Результат:

Nacrtajmo polovinu popunjenog kruga

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(); // popuni konturu

Результат:

Praktični zadaci