Canvas fillStyle အရည်အချင်း

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 用于填充绘图的 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 နှင့် အရှည်အတန်း ကို <canvas> အားကွယ်ရာ မမြင်တတ်

Canvas အကြောင်းကြားရင်း