Рисуване на окръжности чрез 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(); // ще запълним контура

Результат:

Практически задачи