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 rect() နည်းလမ်း

❮ HTML Canvas အကိုးအကား

ဥပမာ

150*100 pixels စတုဂံတစ်ခုဆွဲပါ-

သင်၏ဘရောက်ဆာသည် HTML5canvastag ကိုမပံ့ပိုးပါ။

JavaScript-

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.rect(20, 20, 150, 100);
ctx.stroke();

Browser ပံ့ပိုးမှု

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

Method
rect() Yes 9.0 Yes Yes Yes

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

rect() နည်းလမ်းသည် ထောင့်မှန်စတုဂံတစ်ခုကို ဖန်တီးသည်။

အကြံပြုချက်- ကင်းဗတ်စ်ပေါ်တွင် ထောင့်မှန်စတုဂံကို အမှန်တကယ်ဆွဲရန် stroke () သို့မဟုတ် fill() နည်းလမ်းကို အသုံးပြုပါ။

JavaScript syntax- ဆက်စပ်မှု .rect(x၊y၊width၊height ) ;

ကန့်သတ်တန်ဖိုးများ

Parameter Description Play it
x The x-coordinate of the upper-left corner of the rectangle
y The y-coordinate of the upper-left corner of the rectangle
width The width of the rectangle, in pixels
height The height of the rectangle, in pixels

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

ဥပမာ

rect() method ဖြင့် ထောင့်မှန်စတုဂံသုံးပုံ ဖန်တီးပါ။

သင့်ဘရောင်ဇာသည် ကင်ဗာစတက်ဂ်ကို မပံ့ပိုးပါ။

JavaScript-

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// Red rectangle
ctx.beginPath();
ctx.lineWidth = "6";
ctx.strokeStyle = "red";
ctx.rect(5, 5, 290, 140);
ctx.stroke();

// Green rectangle
ctx.beginPath();
ctx.lineWidth = "4";
ctx.strokeStyle = "green";
ctx.rect(30, 30, 50, 50);
ctx.stroke();

// Blue rectangle
ctx.beginPath();
ctx.lineWidth = "10";
ctx.strokeStyle = "blue";
ctx.rect(50, 50, 150, 80);
ctx.stroke();


❮ HTML Canvas အကိုးအကား