Arc методу

arc методу белгиленген чекитте борборлошкон, белгиленген радиусу бар доо сызат. Бул доо көрүнөт эле, эгерде гана stroke же fill методдорун колдонсоңуз. Биринчи учурда сызык, экинчи учурда - форма болот.

Акыркы милдеттүү эмес параметр сызоо багытын жөндөйт. Ал 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;
}

Результат:

Дагы караңыз