ผ้าใบ HTML createRadialGradient () วิธีการ
คู่มือการใช้งาน HTML ผ้าใบอ้างอิง
ตัวอย่าง
วาดรูปสี่เหลี่ยมผืนผ้าที่มีรัศมี / วงกลมสีเติมไล่ระดับ A:
javascript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,100);
var ctx=c.getContext("2d");
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,100);
ลอง»
สนับสนุนเบราว์เซอร์
Internet Explorer 9, Firefox, Opera, Chrome และ Safari สนับสนุน createRadialGradient () วิธีการ
หมายเหตุ: 8 และรุ่นก่อนหน้าของ Internet Explorer ไม่สนับสนุน <ผ้าใบ> องค์ประกอบ
ความหมายและการใช้งาน
createRadialGradient () วิธีการสร้างรัศมี / วัตถุกลมไล่ระดับสี
ไล่โทนสีสามารถนำมาใช้ในการกรอกข้อมูลสี่เหลี่ยมวงกลมเส้น, ข้อความ, และอื่น ๆ
เคล็ดลับ: ใช้วัตถุนี้เป็น strokeStyle หรือ สไตล์การเติมสี มูลค่าของทรัพย์สิน
เคล็ดลับ: ใช้ addColorStop () วิธีการระบุสีที่แตกต่างกันเช่นเดียวกับตำแหน่งที่จะค้นหาวัตถุไล่ระดับสี
| ไวยากรณ์ javascript: | บริบท .createRadialGradient (x0, y0, R0, X1, Y1, R1); |
|---|
ค่าพารามิเตอร์
| 参数 | 描述 |
|---|---|
| x0 | 渐变的开始圆的 x 坐标 |
| y0 | 渐变的开始圆的 y 坐标 |
| r0 | 开始圆的半径 |
| x1 | 渐变的结束圆的 x 坐标 |
| y1 | 渐变的结束圆的 y 坐标 |
| r1 | 结束圆的半径 |
คู่มือการใช้งาน HTML ผ้าใบอ้างอิง