JavaScript орқали canvasда айланалар чизиш
Кейинги метод 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(); // контурни бўёймиз
:
