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 ကင်းဗတ် ဖြည့်စွက်Style ပိုင်ဆိုင်မှု

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

ဥပမာ

ထောင့်မှန်စတုဂံအတွက် အနီရောင်ဖြည့်စွက်အရောင်ကို သတ်မှတ်ပါ-

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

JavaScript-

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(20, 20, 150, 100);

Browser ပံ့ပိုးမှု

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

Method
fillStyle() Yes 9.0 Yes Yes Yes

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

fillStyle ပိုင်ဆိုင်မှုသည် ပုံဆွဲအားဖြည့်ရန်အတွက် အသုံးပြုသော အရောင်၊ gradient သို့မဟုတ် ပုံစံကို သတ်မှတ်ပေးသည် သို့မဟုတ် ပြန်ပေးသည်။

မူလတန်ဖိုး: #၀၀၀၀၀၀
JavaScript syntax- context .fillStyle= အရောင် | gradient | ပုံစံ ;

အိမ်ခြံမြေတန်ဖိုးများ

Value Description Play it
color A CSS color value that indicates the fill color of the drawing. Default value is #000000
gradient A gradient object (linear or radial) used to fill the drawing  
pattern A pattern object to use to fill the drawing  

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

ဥပမာ

ထောင့်မှန်စတုဂံအတွက် ဖြည့်စွက်ပုံစံအဖြစ် gradient (အပေါ်မှအောက်ခြေ) ကို သတ်မှတ်ပါ-

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

JavaScript-

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var my_gradient = ctx.createLinearGradient(0, 0, 0, 170);
my_gradient.addColorStop(0, "black");
my_gradient.addColorStop(1, "white");
ctx.fillStyle = my_gradient;
ctx.fillRect(20, 20, 150, 100);

ဥပမာ

ထောင့်မှန်စတုဂံအတွက် ဖြည့်စွက်ပုံစံအဖြစ် gradient (ဘယ်မှညာသို့) ကိုသတ်မှတ်ပါ-

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

JavaScript-

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0, 0, 170, 0);
my_gradient.addColorStop(0, "black");
my_gradient.addColorStop(1, "white");
ctx.fillStyle = my_gradient;
ctx.fillRect(20, 20, 150, 100);

ဥပမာ

ထောင့်မှန်စတုဂံအတွက် ဖြည့်စွက်ပုံစံအနေဖြင့် အနက်ရောင်၊ အနီရောင်မှ အဖြူရောင်သို့ ရောင်စုံအဆင့်ကို သတ်မှတ်ပါ-

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

JavaScript-

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0, 0, 170, 0);
my_gradient.addColorStop(0, "black");
my_gradient.addColorStop(0.5, "red");
my_gradient.addColorStop(1, "white");
ctx.fillStyle = my_gradient;
ctx.fillRect(20, 20, 150, 100);

အသုံးပြုရန်ပုံ-

မီးအိမ်

ဥပမာ

ပုံတစ်ပုံကို ဖြည့်စွက်ရန် ပုံတစ်ပုံကို သုံးပါ-

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

JavaScript-

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("lamp");
var pat = ctx.createPattern(img, "repeat");
ctx.rect(0, 0, 150, 100);
ctx.fillStyle = pat;
ctx.fill();

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