HTML Canvas ပုံဆွဲခြင်း။
JavaScript ဖြင့် Canvas ကိုဆွဲပါ။
HTML canvas ပေါ်ရှိ ပုံအားလုံးကို JavaScript ဖြင့် လုပ်ဆောင်ရမည်-
ဥပမာ
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);
</script>
အဆင့် 1- Canvas Element ကိုရှာပါ။
ပထမဦးစွာ သင်သည် <canvas> အစိတ်အပိုင်းကို ရှာရပါမည်။
HTML DOM နည်းလမ်း getElementById():
var canvas = document.getElementById("myCanvas");
အဆင့် 2- Drawing Object ဖန်တီးပါ။
ဒုတိယအနေနှင့်၊ သင်သည် ကင်းဗတ်စ်အတွက် ပုံဆွဲသောအရာတစ်ခု လိုအပ်ပါသည်။
getContext() သည် ပုံဆွဲရန်အတွက် ဂုဏ်သတ္တိများနှင့် နည်းလမ်းများပါရှိသော built-in HTML အရာတစ်ခုဖြစ်သည်။
var ctx = canvas.getContext("2d");
အဆင့် 3: Canvas ပေါ်တွင်ဆွဲပါ။
နောက်ဆုံးအနေနဲ့ ကင်းဗတ်ပေါ်မှာ ဆွဲလို့ရပါတယ်။
ပုံဆွဲအရာဝတ္တု၏ ဖြည့်စွက်ပုံစံကို အရောင်အနီအဖြစ် သတ်မှတ်ပါ-
ctx.fillStyle = "#FF0000";
fillStyle ပိုင်ဆိုင်မှုသည် CSS အရောင်၊ gradient သို့မဟုတ် ပုံစံတစ်ခု ဖြစ်နိုင်သည်။ မူရင်းဖြည့်စွက်ပုံစံသည် အနက်ရောင်ဖြစ်သည်။
fillRect(x၊y၊width၊height ) နည်းလမ်းသည် ကင်းဗတ်ပေါ်တွင် ဖြည့်စွက်ပုံစံဖြင့်ဖြည့်ထားသော စတုဂံပုံဆွဲသည်-
ctx.fillRect(0, 0, 150, 75);