HTML အကိုးအကား

အက္ခရာဖြင့် HTML HTML အမျိုးအစားအလိုက် HTML Browser ပံ့ပိုးမှု HTML အရည်အချင်းများ HTML ကမ္ဘာလုံးဆိုင်ရာ အရည်အချင်းများ HTML ပွဲများ HTML အရောင်များ HTML Canvas HTML အသံ/ဗီဒီယို HTML အက္ခရာအစုံများ HTML Doctypes HTML URL ကုဒ် HTML ဘာသာစကားကုဒ်များ HTML နိုင်ငံကုဒ်များ HTTP မက်ဆေ့ခ်ျများ HTTP နည်းလမ်းများ PX မှ EM Converter ကီးဘုတ်ဖြတ်လမ်းများ


HTML <canvas> width Attribute

❮ HTML <canvas> တဂ်

ဥပမာ

အမြင့်နှင့် အကျယ် 200 pixels ရှိသော <canvas> ဒြပ်စင်တစ်ခု-

<canvas id="myCanvas" width="200" height="200" style="border:1px solid">

အောက်တွင် နောက်ထပ် "စမ်းသုံးကြည့်ပါ" ဥပမာများ။


အဓိပ္ပါယ်နှင့် အသုံးပြုမှု

ရည်ညွှန်းချက်သည် ဒြပ်စင် ၏ widthအကျယ် <canvas>ကို pixels ဖြင့် သတ်မှတ်သည်။

အကြံပြုချက်- pixels height ဖြင့် ဒြပ်စင်၏ အမြင့်ကို သတ်မှတ်ရန် ရည်ညွှန်းချက်ကို အသုံးပြု ပါ။ <canvas>

အကြံပြုချက်- ကင်းဗတ်တစ်ခု၏ အမြင့် သို့မဟုတ် အကျယ်ကို ပြန်လည်သတ်မှတ်သည့်အခါတိုင်း၊ ကင်းဗတ်စသည့်အကြောင်းအရာကို ရှင်းလင်းသွားမည် (စာမျက်နှာ၏အောက်ခြေတွင် ဥပမာကိုကြည့်ပါ)။

အကြံပြုချက်- ကျွန်ုပ်တို့၏ HTML Canvas Tutorial <canvas> ရှိ အစိတ်အပိုင်း အကြောင်း ပိုမိုလေ့လာပါ


Browser ပံ့ပိုးမှု

ဇယားရှိ နံပါတ်များသည် attribute ကို အပြည့်အဝထောက်ခံသည့် ပထမဆုံးဘရောက်ဆာဗားရှင်းကို သတ်မှတ်ပေးပါသည်။

Attribute
width 4.0 9.0 2.0 3.1 9.0

အထားအသို

<canvas width="pixels">


ရည်ညွှန်းတန်ဖိုးများ

Value Description
pixels Specifies the width of the canvas, in pixels (e.g. "100"). Default value is 300

နောက်ထပ် ဥပမာများ

ဥပမာ

အကျယ် သို့မဟုတ် အမြင့် ရည်ညွှန်းချက် (JavaScript ကိုသုံး၍) ကင်းဗတ်ကိုရှင်းလင်းပါ။

<canvas id="myCanvas" width="200" height="200" style="border:1px solid"></canvas>

<script>

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#92B901";
ctx.fillRect(50, 50, 100, 100);

function clearCanvas() {
    c.height = 300;
}

</script>

❮ HTML <canvas> တဂ်