JavaScript орқали canvasда айланалар чизиш

Кейинги метод 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(); // контурни бўёймиз

Результат:

Амалий машқлар