HTML canvas fillStyle အချက်အလက်

HTML5 Canvas 参考手册

ဖော်ပြ နှင့် အသုံးပြုခြင်း

fillStyle အချက်အလက် ပြုပြင်ထားသည် သို့မဟုတ် ကွယ်လှန်းထားသော အရောင်၊ အရောင်သုံးပုံကွန်ပ်၊ သို့မဟုတ် ပုံကွန်ပ် ကို အသုံးပြုထားပါတယ်。

အမှတ်

အမှတ် 1

အထူးအရောင်ဖြင့် ပြုပြင်ထားသော အပိုင်းအဝါ ကို ဖော်ပြထားပါတယ်:

ကျောင်းသူ၏ ဘရောက်ဆိုင်မှု က ပုံကွန်ပ် အချက်အလက် ကို ခွင့်ပြုခဲ့ခြင်း မ ရှိချေ။

JavaScript:

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

亲自试一试

အကြောင်းရင်း:ကျောင်းသူ၏ ဘရောက်ဆိုင်မှု အောက်တွင် ပိုမိုသော အမှတ်

အဓိပ္ပာယ်

context.fillStyle=color|gradient|pattern;

အချက်အလက်

အရောင် ဖော်ပြ
color ပြင်ဆင်ပုံ အပြုပြင်ထားသော အရောင် ကို ညွှန်ပြထားသည် CSS အရောင်တရား.) မူးယစ်သုံးသည့် အရောင် #000000 ဖြစ်သည်。
gradient ပြင်ဆင်ပုံများ အတွက် အပြုပြင်ထားသော အရောင်သုံးပုံကွန်ပ် (လေးတန်းသို့မဟုတ်အကြောင်းအရာ)
pattern ပြင်ဆင်ပုံများ အတွက် အပြုပြင်ထားသော ပုံကွန်ပ် အား

နည်းပါးစွာ

မူးယစ်သုံးသည့် အရောင်: #000000

ပိုမိုသော အမှတ်

အမှတ် 2

အရောင်များ ကို အောက်မှ အထက်သို့ ဆက်လက်ပြုပြင်၍ အပိုင်းအဝါ အပိုင်းများ အတွက် ပြုပြင်ထားပါတယ်:

ကျောင်းသူ၏ ဘရောက်ဆိုင်မှု က ပုံကွန်ပ် အချက်အလက် ကို ခွင့်ပြုခဲ့ခြင်း မ ရှိချေ။

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);

亲自试一试

အမှတ် 3

အရောင်များ ကို ဆက်လက်ပြုပြင်၍ အပိုင်းအဝါ အပိုင်းများ အတွက် ပြုပြင်ထားပါတယ်:

ကျောင်းသူ၏ ဘရောက်ဆိုင်မှု က ပုံကွန်ပ် အချက်အလက် ကို ခွင့်ပြုခဲ့ခြင်း မ ရှိချေ။

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);

亲自试一试

အမှတ် 4

ကြောင်းကြားသည့် အရောင်များ မှ ဝေးသွားသော အရောင်သုံးပုံကွန်ပ် ကို လက်ရာပြု၍ အပိုင်းအဝါ အပိုင်းများ အတွက် ပြုပြင်ထားပါတယ်:

ကျောင်းသူ၏ ဘရောက်ဆိုင်မှု က ပုံကွန်ပ် အချက်အလက် ကို ခွင့်ပြုခဲ့ခြင်း မ ရှိချေ။

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);

亲自试一试

အမှတ် 5

အသုံးပြုထားသော ပုံ:

lamp

ပြင်ဆင်ပုံများ ကို အသုံးပြု၍ လက်ရာပြုထားပါတယ်:

ကျောင်းသူ၏ ဘရောက်ဆိုင်မှု က ဟောင်းများ မပေါ်ထွန်းခဲ့ကြောင်း ဖော်ပြထားသည်။

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();

亲自试一试

浏览器支持

表中的数字注明了首个完全支持该属性的浏览器版本。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

注意：Internet Explorer 8 以及更早的版本不支持 元素。

HTML5 Canvas 参考手册