Рысаванне акружнасцей праз 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(); // зафарбуем кантур

Результат:

Практычныя задачы