ผ้าใบ HTML createLinearGradient () วิธีการ
ตัวอย่าง
ความหมายจากสีดำเป็นสีขาวไล่ระดับสี (จากซ้ายไปขวา) รูปแบบสี่เหลี่ยมผืนผ้าเติม:
javascript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
var ctx=c.getContext("2d");
var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
ลอง»
สนับสนุนเบราว์เซอร์
Internet Explorer 9, Firefox, Opera, Chrome และ Safari สนับสนุน createLinearGradient () วิธีการ
หมายเหตุ: 8 และรุ่นก่อนหน้าของ Internet Explorer ไม่สนับสนุน <ผ้าใบ> องค์ประกอบ
ความหมายและการใช้งาน
createLinearGradient () วิธีการสร้างวัตถุเชิงเส้นลาด
ไล่โทนสีสามารถนำมาใช้ในการกรอกข้อมูลสี่เหลี่ยมวงกลมเส้น, ข้อความ, และอื่น ๆ
เคล็ดลับ: ใช้วัตถุนี้เป็น strokeStyle หรือ สไตล์การเติมสี มูลค่าของทรัพย์สิน
เคล็ดลับ: ใช้ addColorStop () วิธีการระบุสีที่แตกต่างกันเช่นเดียวกับตำแหน่งที่จะค้นหาวัตถุไล่ระดับสี
| ไวยากรณ์ javascript: | บริบท .createLinearGradient (x0, y0, X1, Y1); |
|---|
ค่าพารามิเตอร์
| 参数 | 描述 |
|---|---|
| x0 | 渐变开始点的 x 坐标 |
| y0 | 渐变开始点的 y 坐标 |
| x1 | 渐变结束点的 x 坐标 |
| y1 | 渐变结束点的 y 坐标 |
ตัวอย่างเพิ่มเติม
ตัวอย่าง
กําหนดการไล่ระดับสี (บนลงล่าง) เป็นรูปแบบสี่เหลี่ยมผืนผ้าเติม:
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(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);
ลอง»