Метод arc

Метод arc берilган нуқта марказида, берilган радиусли дуга чизади. Бу дуга фақат stroke ёки fill методларини қўлланганингиздан сўнггина кўринади. Бирinчи ҳолда контур, иккинчи ҳолда эса - шакл ҳосил бўлади.

Охирги ихтиёрий параметр чизиш йўналишини тартибга солади. У 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;
}

Результат:

Ҳам қаранг