arc ක්‍රමය

arc ක්‍රමය ලබා දී ඇති ලක්ෂ්‍යයක කේන්ද්‍රයක් සහිත, ලබා දී ඇති අරයක් සහිත වෘත්තාකාරයක් අඳියි. මෙම වෘත්තාකාරය දෘශ්‍යමාන වන්නේ stroke හෝ fill ක්‍රම යෙදුවොත් පමණි. පළමු අවස්ථාවේ එය රූපරේඛාවක් වන අතර දෙවන අවස්ථාවේ - එය රූපයකි.

අවසාන විකල්ප පරාමිතිය අඳීමේ දිශාව නියම කරයි. එය true හෝ false අගයක් ගනී. true අගය වෘත්තාකාරය ඔරලෝසු දිශාවට අඳින අතර, false අගය - ඔරලෝසු දිශාවට විරුද්ධව (පෙරනිමිය ලෙස).

අඳින විට ආරම්භක හා අවසාන කෝණ නියම කළ හැකිය. මෙම කෝණ මනිනු ලබන්නේ රේඩියන් වලින්, අංශක වලින් නොවේ. අංශක රේඩියන් වලට පරිවර්තනය කිරීමට ඔබට පහත ශ්‍රිතය භාවිතා කළ හැකිය:

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

වාක්‍ය රීතිය

context.arc(x, y, radius, startAngle, endAngle, [anticlockwise = false]);

උදාහරණය

අපි වටයක් අඳිමු:

<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

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

උදාහරණය

අපි වටයක භාගයක් අඳිමු:

<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

let 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 භාවිතයෙන් රූපරේඛාව පිරවීම සිදු කරමු):

<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

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

මෙයද බලන්න

rect ක්‍රමය,
සෘජුකෝණාස්‍රයක් අඳින