HTML canvas fillStyle attribute
Tinukoy at paggamit
fillStyle Set ato return ang kulay, gradient o pattern na ginamit para sa paglulutang ng pagpipinta.
Mga katulad na
Mga katulad na 1
Tinukoy ang rectangle na ginagamit ang kulay ng asul na paglulutang:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#0000ff";
ctx.fillRect(20,20,150,100);
Paalala:Mayroon pang higit pang mga katulad na instance sa pangingibabaw ng pahina.
Syntax
context.fillStyle=color|gradient|pattern;
Halaga ng attribute
| Halaga | Inilalarawan |
|---|---|
| color | Nagsasabi ng kulay ng paglulutang ng pagpipinta CSS color value. Ang default na halaga ay #000000. |
| gradient | Gradient object na ginamit para sa paglulutang ng pagpipinta (LinearORadiative) |
| pattern | Pattern object na ginamit para sa paglulutang ng pagpipinta |
Detalye ng teknolohiya
| Default na halaga: | #000000 |
|---|
Higit pang mga katulad na 2
Mga katulad na 2
Tinukoy ang pagpalit mula sa itaas hanggangibaba bilang ang paglulutang ng kulay ng rectangle:
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);
Mga katulad na 3
Tinukoy ang pagpalit mula sa paliit hanggang malaki bilang ang paglulutang ng kulay ng rectangle:
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);
Mga katulad na 4
Tinukoy ang pagpalit mula sa puti hanggang pula hanggang puti bilang ang paglulutang ng kulay ng rectangle:
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);
Mga katulad na 5
Ang ginamit na imahe:
Gamit ang imahe upang punuan ang pagpipinta:
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> อิเล็กทรอนิก
