Цртање кругова преко canvas-а у JavaScript-у

Следећа метода arc црта лук са центром у одређеној тачки. Она прихвата следеће параметре: x, y, полупречник r, почетни угао startAngle, крајњи угао endAngle, цртање у смеру или супротно од казаљке на сату direction.

Параметар direction прихвата следеће вредности: true тера да се црта у смеру казаљке на сату, false супротно од казаљке на сату (подразумевано).

При том углови у методи arc се мере у радијанима, не у степенима. За претварање степени у радијане можете користити следећу функцију:

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

Нацртајмо круг

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

Результат:

Нацртајмо пола круга

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

Результат:

Нацртајмо полукруг

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(); // зафарбамо контур

Результат:

Практични задаци