Arc մեթոդը

arc մեթոդը գծում է աղեղ՝ տրված կենտրոնով և շառավղով: Այս աղեղը տեսանելի կդառնա միայն եթե կիրառեք stroke կամ fill մեթոդները: Առաջին դեպքում կստացվի ուրվագիծ, իսկ երկրորդում - լցված պատկեր:

Վերջին ընտրովի պարամետրը կարգավորում է գծման ուղղությունը: Այն ընդունում է true կամ false արժեքները: true արժեքը աղեղը գծում է ժամացույցի սլաքի ուղղությամբ, իսկ false արժեքը՝ ժամացույցի սլաքի հակառակ ուղղությամբ (լռելյայն):

Գծման ժամանակ կարելի է սահմանել սկզբնական և վերջնական անկյուններ: Այս անկյունները չափվում են ռադիաններով, ոչ աստիճաններով: Աստիճանները ռադիանների վերածելու համար կարող եք օգտագործել հետևյալ ֆունկցիան.

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

Շարահյուսություն

javascriptcontext.arc(x, y, radius, startAngle, endAngle, [counterclockwise = 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;
}

Результат:

Տես նաև