HTML Canvas ဂရပ်ဖစ်
<canvas>ဝဘ်စာမျက်နှာပေါ်တွင် ဂရပ်ဖစ်ဆွဲရန် HTML အစိတ်အပိုင်းကို အသုံးပြုသည်။
ဘယ်ဘက်တွင် ဂရပ်ဖစ်ကို ဖန်တီးထားသည် <canvas>။ ၎င်းသည် အနီရောင်စတုဂံ၊ gradient စတုဂံ၊ အရောင်စုံစတုဂံနှင့် အရောင်ပေါင်းစုံ စာသားတို့ကို ပြသထားသည်။
HTML Canvas ဆိုတာဘာလဲ။
HTML <canvas>ဒြပ်စင်ကို JavaScript မှတဆင့် ဂရပ်ဖစ်ရေးဆွဲရန် အသုံးပြုသည်။
အစိတ်အပိုင်း သည် <canvas>ဂရပ်ဖစ်အတွက် ကွန်တိန်နာတစ်ခုသာဖြစ်သည်။ ဂရပ်ဖစ်ကို အမှန်တကယ်ဆွဲရန် JavaScript ကို အသုံးပြုရပါမည်။
Canvas တွင် လမ်းကြောင်းများ၊ အကွက်များ၊ စက်ဝိုင်းများ၊ စာသားများနှင့် ပုံများထည့်ခြင်းအတွက် နည်းလမ်းများစွာရှိသည်။
Browser ပံ့ပိုးမှု
ဇယားရှိ နံပါတ်များသည်
<canvas>ဒြပ်စင်ကို အပြည့်အဝထောက်ခံသည့် ပထမဆုံးဘရောက်ဆာဗားရှင်းကို သတ်မှတ်ပေးသည်။
| Element | |||||
|---|---|---|---|---|---|
| <canvas> | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
ကင်းဗတ်နမူနာများ
ကင်းဗတ်သည် HTML စာမျက်နှာပေါ်ရှိ စတုဂံဧရိယာဖြစ်သည်။ မူရင်းအားဖြင့်၊ ကင်းဗတ်တစ်ခုတွင် ဘောင်မရှိသလို အကြောင်းအရာလည်း မရှိပါ။
အမှတ်အသားသည် ဤကဲ့သို့ ဖြစ်သည်-
<canvas id="myCanvas" width="200" height="100"></canvas>
မှတ်ချက်- ကင်းဗတ်စ်၏အရွယ်အစားကို သတ်မှတ်ရန် idရည်ညွှန်းချက်တစ်ခု (ဇာတ်ညွှန်းတွင် ရည်ညွှန်းရန်)၊ နှင့် ရည်ညွှန်းချက် widthတစ်ခု တို့ကို အမြဲသတ်မှတ်ပါ ။ heightဘောင်ထည့်ရန်၊ အရည်အချင်းကို အသုံးပြု styleပါ။
ဤသည်မှာ အခြေခံ၊ အချည်းနှီးသော ပတ္တူတစ်ခု၏ ဥပမာတစ်ခုဖြစ်သည်။
ဥပမာ
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid
#000000;">
</canvas>
JavaScript ကိုထည့်ပါ။
ထောင့်မှန်စတုဂံပုံ ဧရိယာကို ဖန်တီးပြီးနောက်၊ ပုံဆွဲရန် JavaScript ကို ထည့်သွင်းရပါမည်။
ဤသည်မှာ ဥပမာအချို့ဖြစ်သည်။
လိုင်းဆွဲပါ။
ဥပမာ
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
</script>
စက်ဝိုင်းတစ်ခုဆွဲပါ။
ဥပမာ
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
</script>
စာသားတစ်ခုဆွဲပါ။
ဥပမာ
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
</script>
လေဖြတ် စာသား
ဥပမာ
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);
</script>
Linear Gradient ဆွဲပါ။
ဥပမာ
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
</script>
Circular Gradient ဆွဲပါ။
ဥပမာ
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
</script>
ပုံဆွဲပါ။
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
</script>
HTML Canvas ကျူတိုရီရယ်
အကြောင်းပိုမိုလေ့လာရန် ၊ ကျွန်ုပ်တို့၏ HTML Canvas Tutorial<canvas> ကိုဖတ်ပါ ။