HTML ကင်းဗတ် ဖြည့်စွက်Style ပိုင်ဆိုင်မှု
ဥပမာ
ထောင့်မှန်စတုဂံအတွက် အနီရောင်ဖြည့်စွက်အရောင်ကို သတ်မှတ်ပါ-
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);
အသုံးပြုရန်ပုံ-
ဥပမာ
ပုံတစ်ပုံကို ဖြည့်စွက်ရန် ပုံတစ်ပုံကို သုံးပါ-
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 အကိုးအကား