HTML Canvas ကျူတိုရီရယ်
HTML <canvas> ဒြပ်စင်ကို ဝဘ်စာမျက်နှာပေါ်တွင် ဂရပ်ဖစ်ဆွဲရန်အတွက် အသုံးပြုသည်။
အပေါ်က ဂရပ်ဖစ်ကို <canvas> နဲ့ ဖန်တီးထားပါတယ်။
၎င်းသည် အနီရောင်စတုဂံ၊ gradient စတုဂံ၊ အရောင်စုံစတုဂံနှင့် အရောင်ပေါင်းစုံ စာသားတို့ကို ပြသထားသည်။
HTML Canvas ဆိုတာဘာလဲ။
HTML <canvas> ဒြပ်စင်ကို scripting မှတဆင့် ဂရပ်ဖစ်ရေးဆွဲရန် (ပုံမှန်အားဖြင့် JavaScript) ကို အသုံးပြုသည်။
<canvas> အစိတ်အပိုင်းသည် ဂရပ်ဖစ်အတွက် ကွန်တိန်နာတစ်ခုသာဖြစ်သည်။ ဂရပ်ဖစ်ကို အမှန်တကယ်ဆွဲရန်အတွက် သင်သည် script ကိုအသုံးပြုရပါမည်။
Canvas တွင် လမ်းကြောင်းများ၊ အကွက်များ၊ စက်ဝိုင်းများ၊ စာသားများနှင့် ပုံများထည့်ခြင်းအတွက် နည်းလမ်းများစွာရှိသည်။
Browser ပံ့ပိုးမှု
ဇယားရှိ နံပါတ်များသည် <canvas> ဒြပ်စင်ကို အပြည့်အဝထောက်ခံသည့် ပထမဆုံးဘရောက်ဆာဗားရှင်းကို သတ်မှတ်ပေးပါသည်။
Element | |||||
---|---|---|---|---|---|
<canvas> | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
HTML Canvas သည် စာသားကို ဆွဲနိုင်သည်။
ကင်းဗတ်စ်သည် ရောင်စုံစာသားများကို ကာတွန်းဖြင့်ဖြစ်စေ သို့မဟုတ် မပါဘဲ ရေးဆွဲနိုင်သည်။
HTML Canvas သည် ဂရပ်ဖစ်များကို ရေးဆွဲနိုင်သည်။
Canvas တွင် ဂရပ်ဖစ်ဒေတာ တင်ဆက်မှုအတွက် ဂရပ်ဖစ်နှင့် ဇယားပုံသဏ္ဍာန်များ ပါဝင်ပါသည်။
HTML Canvas သည် သက်ဝင်လှုပ်ရှားနိုင်သည်။
ကင်းဗတ်စ် အရာဝတ္ထုများသည် ရွေ့လျားနိုင်သည်။ အရာအားလုံးဖြစ်နိုင်သည်- ရိုးရှင်းသောဘောလုံးများမှရှုပ်ထွေးသောကာတွန်းများအထိ။
HTML Canvas သည် အပြန်အလှန်အကျိုးပြုနိုင်သည်။
Canvas သည် JavaScript အစီအစဉ်များကို တုံ့ပြန်နိုင်သည်။
Canvas သည် မည်သည့်အသုံးပြုသူ၏လုပ်ဆောင်ချက်ကိုမဆို တုံ့ပြန်နိုင်သည် (သော့ကလစ်များ၊ မောက်စ်ကလစ်များ၊ ခလုတ်နှိပ်ခြင်း၊ လက်ချောင်းလှုပ်ရှားမှု)။
HTML Canvas ကို ဂိမ်းများတွင် အသုံးပြုနိုင်သည်။
Canvas ၏ animation အတွက် နည်းလမ်းများသည် HTML ဂိမ်းဆော့ခြင်းအတွက် ဖြစ်နိုင်ခြေများစွာကို ပေးဆောင်သည်။
ကင်းဗတ်နမူနာ
HTML တွင်၊ <canvas> ဒြပ်စင်တစ်ခုသည် ဤကဲ့သို့ဖြစ်သည်-
<canvas id="myCanvas" width="200" height="100"></canvas>
<canvas> ဒြပ်စင်တွင် id attribute တစ်ခုရှိရမည်ဖြစ်ပြီး ၎င်းကို JavaScript မှ ရည်ညွှန်းနိုင်သည်။
ကင်းဗတ်၏ အရွယ်အစားကို သတ်မှတ်ရန် အကျယ်နှင့် အမြင့် ရည်ညွှန်းချက် လိုအပ်သည်။
အကြံပြုချက်- HTML စာမျက်နှာတစ်ခုတွင် <canvas> ဒြပ်စင်များစွာကို သင့်တွင်ရှိနိုင်ပါသည်။
ပုံမှန်အားဖြင့်၊ <canvas> ဒြပ်စင်တွင် ဘောင်မရှိသလို အကြောင်းအရာလည်း မရှိပါ။
ဘောင်ထည့်ရန်၊ စတိုင်ရည်ညွှန်းချက်ကို သုံးပါ-
ဥပမာ
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid
#000000;"></canvas>
နောက်အခန်းများတွင် ကင်းဗတ်စ်ကို မည်သို့ဆွဲရမည်ကို ပြသထားသည်။