JavaScript ဖြင့် canvas ပေါ်တွင် မျဉ်းများ ရေးဆွဲခြင်း
ရိုးရှင်းသောအရာမှ စတင်ကြပါစို့ - မျဉ်းများ ရေးဆွဲခြင်း။ မည်သို့ လုပ်ဆောင်ရမည်ကို နားလည်ရန်၊ သင့်ထံတွင် စက္ကူအရွက်နှင့် ခဲတံရှိသည်ဟု စိတ်ကူးကြည့်ပါ။ သင်သည် ထိုစက္ကူပေါ်တွင် ရေးဆွဲနိုင်သည်၊ သို့မဟုတ် ရေးဆွဲခြင်းမပြုဘဲ ခဲတံကို လိုအပ်သောနေရာသို့ ရွှေ့နိုင်သည်။
JavaScript သည်လည်း ထိုနည်းတူ အလုပ်လုပ်သည် - ၎င်းတွင်
ခဲတံ (သို့မဟုတ် ရေးဆွဲရန် ဘောပင်) ရှိသည်၊ လိုအပ်သော
နေရာသို့ သင်သည် ၎င်းကို moveTo method ကို အသုံးပြု၍
ရွှေ့နိုင်သည်၊ ရေးဆွဲရန် - lineTo method ကို အသုံးပြု၍
ရေးဆွဲနိုင်သည်။
method နှစ်ခုစလုံးသည် parameter အဖြစ် ဘောင်၏ထိပ်ကို ရွှေ့ရန်
အမှတ်ကို လက်ခံသည် - ပထမ parameter အဖြစ်
်ိုင်ငါအလျားလိုက် ကိုဩဒိနိတ်၊ ဒုတိယအဖြစ် -
ဒေါင်လိုက် ကိုဩဒိနိတ်။ ကိုဩဒိနိတ်မူလအစ - အမှတ် 0,
0 - ဤသည်မှာ element ၏ အပေါ်ဘယ်ထောင့်ဖြစ်သည်။
ဘောင် လိုအပ်သောနေရာသို့ ရွှေ့သွားသောအခါ -
moveTo method သည် ရိုးရိုးရွှေ့သည်၊
lineTo သည် ရွှေ့သွားစဉ်တွင် ဘောင်လက်ရှိတည်နေရာမှ
၎င်းရွှေ့သွားမည့်အမှတ်အထိ
မျဉ်းတစ်ကြောင်းကို ရေးဆွဲသည်။
သို့သော် အထက်ဖော်ပြပါ code ကို စတင်လိုက်ပါက
- ဘာမှမဖြစ်ပျက်ပါ - နောက်ထပ် command နှစ်ခုကို ရေးရန်လိုအပ်သည်
- ပထမ command beginPath
သည် မျဉ်းရေးဆွဲခြင်းစတင်မီ ဖော်ပြရမည်၊
ဒုတိယ command stroke သည်
moveTo နှင့် lineTo ပေါင်းစပ်မှုအားလုံးပြီးနောက်
မျဉ်းရေးဆွဲရန် ခေါ်ဆိုရမည်။
ထို့ကြောင့် မျဉ်းရေးဆွဲရန် အလုပ်လုပ်သော code ကို ရေးကြပါစို့
မျဉ်းတစ်ကြောင်းရေးဆွဲမည်
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.stroke();
:
ငှက်ပုံစံရေးဆွဲမည်
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
ctx.stroke();
:
တြိဂံရေးဆွဲမည်
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
ctx.lineTo(50, 50);
ctx.stroke();
:
စတုရန်းပုံရေးဆွဲမည်
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(150, 150);
ctx.lineTo(50, 150);
ctx.closePath();
ctx.stroke();
:
ပုံသဏ္ဍာန်များ ပိတ်ခြင်း
ပိတ်ထားသောပုံသဏ္ဍာန်တစ်ခုရေးဆွဲရန်
မျဉ်းအားလုံးကို မလုပ်စရာမလိုပါ
- နောက်ဆုံးမျဉ်းကို
အလိုအလျောက်ရေးဆွဲပြီး ပုံသဏ္ဍာန်ကို ပိတ်နိုင်သည်။
ဤသို့ပြုလုပ်ရန် stroke method မတိုင်မီ
closePath method ကို ခေါ်ဆိုရမည်။
ဤ method သည် ပုံသဏ္ဍာန်ကို ပိတ်ရန် ကြိုးစားသည်၊ အဆုံးအမှတ်မှ ကနဦးအမှတ်သို့ ဖြောင့်တန်းသောမျဉ်းကို ရေးဆွဲခြင်းဖြင့် ပိတ်သည်။ ပုံသဏ္ဍာန်သည် အကယ်၍ ပိတ်ပြီးသားဖြစ်နေပါက သို့မဟုတ် ရိုးရှင်းစွာအမှတ်တစ်ခုသာဖြစ်နေပါက၊ method သည် ဘာမျှမလုပ်ပါ။
closePath ကို အသုံးပြု၍ တြိဂံတစ်ခုရေးဆွဲကြပါစို့
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
//ctx.lineTo(50, 50); - ဤအဆင့်ကို ကျော်လိုက်သည်
ctx.closePath();
ctx.stroke();
:
ပုံသဏ္ဍာန်များ အရောင်ဖြည့်ခြင်း
stroke method အစား
fill method ကို အသုံးပြုနိုင်သည် - ဤသို့ပြုလုပ်သည့်အခါ ပုံသဏ္ဍာန်သည်
လုံးဝပိတ်ထားရန်မလိုအပ်ပါ - ၎င်းသည်
အရောင်ဖြည့်သွားမည်
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
//ctx.lineTo(50, 50); - ဤအဆင့်ကို ကျော်လိုက်သည်
//ctx.closePath(); - ဤတစ်ခုလည်း ကျော်လိုက်သည်
ctx.fill();
:
