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(); // ကွင်းဆက်ကို အရောင်ဖြည့်မည်

Результат:

လက်တွေ့လေ့ကျင့်ခန်းများ