HTML <canvas> Tag
ဥပမာ
ပျံသန်းနေစဉ် အနီရောင်စတုဂံပုံဆွဲပြီး <canvas> ဒြပ်စင်အတွင်း၌ ပြသပါ-
<canvas id="myCanvas">
Your browser
does not support the canvas tag.
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80);
</script>
အောက်တွင် နောက်ထပ် "စမ်းသုံးကြည့်ပါ" ဥပမာများ။
အဓိပ္ပါယ်နှင့် အသုံးပြုမှု
tag ကို <canvas>scripting (များသောအားဖြင့် JavaScript) မှတဆင့် ဂရပ်ဖစ်ရေးဆွဲရန်၊
တဂ်သည် ဖောက်ထွင်းမြင်ရ ပြီး <canvas>ဂရပ်ဖစ်အတွက် ကွန်တိန်နာတစ်ခုသာဖြစ်ပြီး ဂရပ်ဖစ်ကို အမှန်တကယ်ဆွဲရန် script ကို အသုံးပြုရပါမည်။
ဒြပ်စင် အတွင်းရှိ မည်သည့်စာသားမဆို <canvas>JavaScript ကိုပိတ်ထားသောဘရောက်ဆာများနှင့် ပံ့ပိုးမှုမရှိသောဘရောက်ဆာများတွင် ပြသ <canvas>မည်ဖြစ်သည်။
အကြံပြုချက်များနှင့် မှတ်စုများ
အကြံပြုချက်- ကျွန်ုပ်တို့၏ HTML Canvas Tutorial<canvas> ရှိ အစိတ်အပိုင်း
အကြောင်း ပိုမိုလေ့လာပါ ။
အကြံပြုချက်- ဂုဏ်သတ္တိများနှင့် နည်းလမ်းများအားလုံးကို အပြည့်အစုံကိုးကားရန်အတွက်၊ ကျွန်ုပ်တို့၏ HTML Canvas အကိုးအကားကို ဝင်ရောက်ကြည့်ရှုပါ ။
Browser ပံ့ပိုးမှု
ဇယားရှိ နံပါတ်များသည် ဒြပ်စင်ကို အပြည့်အဝထောက်ခံသည့် ပထမဆုံးဘရောက်ဆာဗားရှင်းကို သတ်မှတ်ပေးသည်။
| Element | |||||
|---|---|---|---|---|---|
| <canvas> | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
ဂုဏ်တော်
| Attribute | Value | Description |
|---|---|---|
| height | pixels | Specifies the height of the canvas. Default value is 150 |
| width | pixels | Specifies the width of the canvas Default value is 300 |
ကမ္ဘာလုံးဆိုင်ရာ အရည်အချင်းများ
<canvas>tag သည် HTML တွင် Global Attributes ကို ပံ့ပိုး ပေးပါသည်။
ဖြစ်ရပ်ဂုဏ်တော်များ
<canvas>tag သည် HTML ရှိ Event Attributes ကိုလည်း ပံ့ပိုး ပေးပါသည် ။
နောက်ထပ် ဥပမာများ
ဥပမာ
နောက်ထပ် <canvas> ဥပမာ-
<canvas id="myCanvas">
Your browser does not
support the canvas tag.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20,
20, 75, 50);
//Turn transparency on
ctx.globalAlpha = 0.2;
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 75, 50);
ctx.fillStyle
= "green";
ctx.fillRect(80, 80, 75, 50);
</script>
မူရင်း CSS ဆက်တင်များ
ဘရောက်ဆာအများစုသည် <canvas>အောက်ဖော်ပြပါ ပုံသေတန်ဖိုးများဖြင့် အစိတ်အပိုင်းကို ပြသလိမ့်မည်-
ဥပမာ
canvas {
height: 150px;
width: 300px;
}