HTML Canvas Coordinates
Canvas Coordinates
HTML ကင်းဗတ်သည် နှစ်ဘက်မြင်ဂရစ်တစ်ခုဖြစ်သည်။
ကင်းဗတ်စ်၏ ဘယ်ဘက်အပေါ်ထောင့်တွင် သြဒိနိတ်များ (0.0) ပါရှိသည်။
ယခင်အခန်းတွင်၊ fillRect(0,0,150,75) အသုံးပြုထားသည်ကို သင်တွေ့ခဲ့ရသည်။
ဆိုလိုသည်မှာ- ဘယ်ဘက်အပေါ်ထောင့် (0,0) တွင် စတင်ပြီး 150x75 ပစ်ဇယ်စတုဂံပုံဆွဲပါ။
Coordinates ဥပမာ
၎င်း၏ x နှင့် y သြဒိနိတ်များကို ကြည့်ရန် အောက်ပါစတုဂံကို မောက်စ်ဖြင့် နှိပ်ပါ။
လိုင်းဆွဲပါ။
ကင်းဗတ်စ်ပေါ်တွင် မျဉ်းဖြောင့်ဆွဲရန် အောက်ပါနည်းလမ်းများကို အသုံးပြုပါ။
- moveTo( x,y ) - မျဉ်းကြောင်း၏ အစမှတ်ကို သတ်မှတ်သည်။
- lineTo( x,y ) - လိုင်း၏အဆုံးမှတ်ကို သတ်မှတ်သည်။
မျဉ်းကြောင်းကို အမှန်တကယ်ဆွဲရန်၊ stroke() ကဲ့သို့သော "မင်" နည်းလမ်းများထဲမှ တစ်ခုကို အသုံးပြုရပါမည်။
ဥပမာ
အနေအထား (0,0) တွင် အစမှတ်ကို သတ်မှတ်ရန်နှင့် အနေအထား (200,100) တွင် အဆုံးသတ်အမှတ်ကို သတ်မှတ်ပါ။ ထို့နောက် မျဉ်းကြောင်းကို အမှန်တကယ်ဆွဲရန် stroke() method ကိုသုံးပါ။
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
စက်ဝိုင်းတစ်ခုဆွဲပါ။
ကင်းဗတ်ပေါ်တွင် စက်ဝိုင်းပုံဆွဲရန် အောက်ပါနည်းလမ်းများကို အသုံးပြုပါ။
- beginPath() - လမ်းကြောင်းတစ်ခု စတင်သည်။
- arc(x၊y၊r၊startangle၊endangle) - arc/curve ကို ဖန်တီးသည်။ arc(): စတင်ထောင့်ကို 0 နှင့် အဆုံးထောင့်ကို 2*Math.PI သို့ သတ်မှတ်ပါ။ x နှင့် y ဘောင်များသည် စက်ဝိုင်း၏ အလယ်ဗဟိုရှိ x- နှင့် y-coordinates ကို သတ်မှတ်သည်။ r parameter သည် စက်ဝိုင်း၏ အချင်းဝက်ကို သတ်မှတ်သည်။
ဥပမာ
arc() method ဖြင့် စက်ဝိုင်းတစ်ခုကို သတ်မှတ်ပါ။ ထို့နောက် စက်ဝိုင်းကို အမှန်တကယ်ဆွဲရန် stroke() method ကိုသုံးပါ။
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();