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

Следниот метод arc црта лак со центар во одредена точка. Ги прифаќа следните параметри: x, y, радиус r, почетен агол startAngle, краен агол endAngle, цртање во или спротивно на насоката на стрелките на часовникот direction.

Параметарот direction ги зема следните вредности: true го наметнува цртањето во насока на стрелките на часовникот, false спротивно од стрелките на часовникот (по default).

Притоа аглите во методот 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(); // ќе го исполниме контурот

Результат:

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