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

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

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

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

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

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

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

Результат:

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

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

Результат:

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

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

Результат:

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