Arc metodu

arc metodu, merkezi bellenen nokatda, bellenen radiusly arka çyzýar. Bu arka, diňe stroke ýa-da fill metodlary ulanylanda görünjek. Birinjide kontur, ikinjide bolsa şekil bolýar.

Iň soňky islege görä parametr, çyzugyň ugruny düzgünleşdirýär. Ol true ýa-da false görnüşini alýar. true bahasy, sagat eýresi boýunça arka çyzýar, false bahasy bolsa sagat eýresiniň tersine çyzýar (bölegiň öňünden bellidir).

Çyzgyda başlangyç we soňky burçlary belläp bolýar. Bu burçlar radianda ölçenýär, gradusda däl. Gradusy radianda öwürmek üçin aşakdaky funksiýany ulanyp bilersiňiz:

javascriptfunction getRadians(degrees) {
  return (Math.PI / 180) * degrees;
}

Sintaksis

javascriptkontekst.arc(x, y, radius, başlangyç burç, soňky burç, [ugur = false]);

Mysal

Geliň, bir tegelek çyzyň:

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;
}

Результат:

Mysal

Geliň, tegeleğiň ýarysyny çyzyň:

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;
}

Результат:

Mysal

Geliň, daýryň ýarysyny çyzyň (kontury fill arkaly dolduryň):

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;
}

Результат:

Şeýle-de serediň