Рысаванне акружнасцей праз canvas на JavaScript
Наступны метад arc рысуе дугу з
цэнтрам у некаторай кропцы. Ён прымае наступныя
параметры: x, y, радыўс r,
пачатковы кут startAngle, канчатковы
кут endAngle, рысаваць па або супраць
гадзіннікавай стрэлкі direction.
Параметр direction прымае наступныя значэнні: true прымушае
рысаваць па гадзіннікавай стрэлцы, false супраць гадзіннікавай (па змаўчанні).
Пры гэтым вуглы ў метадзе arc вымяраюць у радыянах,
не ў градусах. Для перакладу градусаў у радыяны
вы можаце выкарыстоўваць наступную функцыю:
function getRadians(degrees) {
return (Math.PI / 180) * degrees;
}
Нарысуем акружнасць
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.arc(100, 100, 75, 0, getRadians(360));
ctx.stroke();
:
Нарысуем палавінку акружнасці
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.arc(100, 100, 75, 0, getRadians(180));
ctx.stroke();
:
Нарысуем палавінку круга
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.arc(100, 100, 75, 0, getRadians(180));
ctx.fill(); // зафарбуем кантур
:
