JavaScript භාවිතයෙන් canvas හරහා වෘත්ත අඳින්න

ඊළඟ ක්‍රමය arc කිසියම් ලක්ෂ්‍යයක මධ්‍යස්ථානයක් සහිත චාපයක් අඳීය. එය පහත පරාමිතීන් පිළිගනී: x, y, අරය r, ආරම්භක කෝණය startAngle, අවසන් කෝණය endAngle, ඔරලෝසුව දෙසට හෝ එහි විරුද්ධ දෙසට අඳින්න direction.

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

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

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

වෘත්තයක් අඳිමු

<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();

වෘත්තයක අඩක් අඳිමු

<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();

වෘත්තාකාර අඩක් අඳිමු

<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(); // සම්බන්ධීකරණය පිටතට ඇන්දෙයි

JavaScript භාවිතයෙන් canvas හරහා වෘත්ත අඳින්න

වෘත්තයක් අඳිමු

වෘත්තයක අඩක් අඳිමු

වෘත්තාකාර අඩක් අඳිමු

ප්‍රායෝගික කාර්යයන්