HTML คุณสมบัติผ้าใบสไตล์การเติมสี
คู่มือการใช้งาน HTML ผ้าใบอ้างอิง
ตัวอย่าง
เต็มไปด้วยรูปสี่เหลี่ยมผืนผ้าสีแดงที่กำหนดไว้:
javascript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(20,20,150,100);
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(20,20,150,100);
ลอง»
สนับสนุนเบราว์เซอร์
Internet Explorer 9, Firefox, Opera, Chrome และ Safari คุณสมบัติการสนับสนุนสไตล์การเติมสี
หมายเหตุ: 8 และรุ่นก่อนหน้าของ Internet Explorer ไม่สนับสนุน <ผ้าใบ> องค์ประกอบ
ความหมายและการใช้งาน
การตั้งค่าคุณสมบัติสไตล์การเติมสีหรือส่งกลับสีไล่ระดับสีหรือรูปแบบที่ใช้ในการกรอกภาพวาด
| เริ่มต้น: | # 000000 |
|---|---|
| ไวยากรณ์ javascript: | บริบท .fillStyle = สี | การไล่ระดับสี | รูปแบบ; |
มูลค่าทรัพย์สิน
| 值 | 描述 |
|---|---|
| color | 指示绘图填充色的 CSS 颜色值 。默认值是 #000000。 |
| gradient | 用于填充绘图的渐变对象（ 线性 或 放射性 ）。 |
| pattern | 用于填充绘图的 pattern 对象。 |
ตัวอย่างเพิ่มเติม
ตัวอย่าง
ความหมายของการไล่ระดับสีจากบนลงล่างเป็นรูปแบบการเติมสี่เหลี่ยมผืนผ้าของ:
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);
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);
ลอง»
ตัวอย่าง
ความหมายของการไล่ระดับสีจากซ้ายไปขวาเป็นรูปแบบการเติมสี่เหลี่ยมผืนผ้าของ:
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);
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);
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();
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 ผ้าใบอ้างอิง