ผ้าใบ HTML createRadialGradient() Method
ตัวอย่าง
วาดรูปสี่เหลี่ยมผืนผ้าและเติมด้วยการไล่ระดับสีแนวรัศมี/วงกลม:
จาวาสคริปต์:
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);
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่รองรับวิธีการนี้อย่างเต็มที่
| Method | |||||
|---|---|---|---|---|---|
| createRadialGradient() | Yes | 9.0 | Yes | Yes | Yes |
ความหมายและการใช้งาน
เมธอด createRadialGradient() สร้างออบเจกต์การไล่ระดับสีแบบรัศมี/วงกลม
สามารถใช้การไล่ระดับสีเพื่อเติมสี่เหลี่ยม วงกลม เส้น ข้อความ ฯลฯ
เคล็ดลับ:ใช้วัตถุนี้เป็นค่าของ คุณสมบัติstrokeStyleหรือfillStyle
เคล็ดลับ:ใช้เมธอด addColorStop()เพื่อระบุสีต่างๆ และตำแหน่งที่จะวางตำแหน่งสีในออบเจกต์การไล่ระดับสี
| ไวยากรณ์ JavaScript: | บริบท .createRadialGradient ( x0,y0,r0,x1,y1,r1 ); |
|---|
ค่าพารามิเตอร์
| Parameter | Description |
|---|---|
| x0 | The x-coordinate of the starting circle of the gradient |
| y0 | The y-coordinate of the starting circle of the gradient |
| r0 | The radius of the starting circle |
| x1 | The x-coordinate of the ending circle of the gradient |
| y1 | The y-coordinate of the ending circle of the gradient |
| r1 | The radius of the ending circle |
❮ อ้างอิงผ้าใบ HTML