HTML Canvas စာသား
Canvas ပေါ်တွင် စာသားဆွဲခြင်း။
ကင်းဗတ်ပေါ်တွင် စာသားဆွဲရန်၊ အရေးကြီးဆုံး ပိုင်ဆိုင်မှုနှင့် နည်းလမ်းများမှာ-
- ဖောင့် - စာသားအတွက် ဖောင့်ဂုဏ်သတ္တိများကို သတ်မှတ်သည်။
- fillText( စာသား ၊x၊y ) - ကင်းဗတ်ပေါ်တွင် "ဖြည့်ထားသော" စာသားကို ဆွဲသည်။
- strokeText( စာသား ၊x၊y ) - ကင်းဗတ်ပေါ်တွင် စာသားဆွဲသည် (ဖြည့်စွက်ခြင်းမရှိပါ)
fillText() ကိုအသုံးပြုခြင်း
ဥပမာ
ဖောင့်ကို 30px "Arial" ဟု သတ်မှတ်ပြီး ကင်းဗတ်ပေါ်တွင် ဖြည့်ထားသော စာသားကို ရေးပါ။
JavaScript-
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
strokeText() ကိုအသုံးပြုခြင်း
ဥပမာ
ဖောင့်ကို 30px "Arial" ဟု သတ်မှတ်ပြီး ကင်းဗတ်စ်ပေါ်တွင် ဖြည့်စွက်စရာမလိုဘဲ စာသားတစ်ခုရေးပါ-
JavaScript-
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);
အရောင်နှင့် စာသားဗဟိုချက်ထည့်ပါ။
ဥပမာ
ဖောင့်ကို 30px "Comic Sans MS" ဟု သတ်မှတ်ပြီး ကင်းဗတ်စ်၏ အလယ်တွင် အနီရောင် စာသားကို ရေးပါ။
JavaScript-
var
canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Comic Sans MS";
ctx.fillStyle = "red";
ctx.textAlign = "center";
ctx.fillText("Hello World", canvas.width/2, canvas.height/2);