Метод arc

Методът arc рисува дъга с център в дадена точка, с даден радиус. Видима тази дъга ще стане, само ако се приложат методите stroke или fill. В първия случай ще бъде контур, а във втория - фигура.

Последният незадължителен параметър регулира посоката на рисуване. Той приема стойност true или false. Стойността true рисува дъга по посока на часовниковата стрелка, а стойността false - обратно на часовниковата (по подразбиране).

Може да зададете начален и краен ъгъл при рисуване. Тези ъгли се измерват в радиани, не в градуси. За превръщане на градуси в радиани можете да използвате следната функция:

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

Синтаксис

javascriptконтекст.arc(x, y, радиус, начален ъгъл, краен ъгъл, [посока = false]);

Пример

Нека нарисуваме окръжност:

html<canvas id="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();

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

Результат:

Пример

Нека нарисуваме половин окръжност:

html<canvas id="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();

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

Результат:

Пример

Нека нарисуваме половин кръг (запълним контура с помощта на fill):

html<canvas id="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();

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

Результат:

Вижте също