ผ้าใบ HTML addColorStop () วิธีการ
คู่มือการใช้งาน HTML ผ้าใบอ้างอิง
ตัวอย่าง
กําหนดการไล่ระดับสีจากสีดำเป็นสีขาวสไตล์สี่เหลี่ยมผืนผ้าเติม:
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 สนับสนุน addColorStop () วิธีการ
หมายเหตุ: 8 และรุ่นก่อนหน้าของ Internet Explorer ไม่สนับสนุน <ผ้าใบ> องค์ประกอบ
ความหมายและการใช้งาน
addColorStop () วิธีการระบุการไล่ระดับสีวัตถุและตำแหน่ง
addColorStop () วิธี createLinearGradient () หรือ createRadialGradient () ใช้ร่วมกัน
หมายเหตุ: คุณสามารถเรียก addColorStop () วิธีการหลายครั้งที่จะเปลี่ยนการไล่ระดับสีหากคุณไม่ได้เป็นวัตถุการไล่ระดับสีใช้วิธีนี้การไล่ระดับสีจะมองไม่เห็น เพื่อให้ได้รับการไล่ระดับสีที่มองเห็นคุณจำเป็นต้องสร้างอย่างน้อยหนึ่งสี
| ไวยากรณ์ javascript: | การไล่ระดับสี.addColorStop (STOP สี); |
|---|
ค่าพารามิเตอร์
| 参数 | 描述 |
|---|---|
| stop | 介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。 |
| color | 在stop位置显示的 CSS 颜色值 。 |
ตัวอย่างเพิ่มเติม
ตัวอย่าง
มันจะถูกกำหนดโดยส่วนใหญ่ของการไล่ระดับสี addColorStop () วิธีการ:
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("0.3","magenta");
grd.addColorStop("0.5","blue");
grd.addColorStop("0.6","green");
grd.addColorStop("0.8","yellow");
grd.addColorStop(1,"red");
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("0.3","magenta");
grd.addColorStop("0.5","blue");
grd.addColorStop("0.6","green");
grd.addColorStop("0.8","yellow");
grd.addColorStop(1,"red");
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
ลอง»
คู่มือการใช้งาน HTML ผ้าใบอ้างอิง