HTML canvas addColorStop() Method
ตัวอย่าง
กำหนดการไล่ระดับสีที่เปลี่ยนจากสีดำเป็นสีขาว เป็นสไตล์การเติมสำหรับสี่เหลี่ยมผืนผ้า:
จาวาสคริปต์:
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);
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่รองรับวิธีการนี้อย่างเต็มที่
| Method | |||||
|---|---|---|---|---|---|
| addColorStop() | Yes | 9.0 | Yes | Yes | Yes |
ความหมายและการใช้งาน
addColorStop() วิธีการระบุสีและตำแหน่งในวัตถุไล่ระดับ
วิธีการ addColorStop() ใช้ร่วมกับ createLinearGradient()หรือ createRadialGradient( )
หมายเหตุ:คุณสามารถเรียกใช้เมธอด addColorStop() ได้หลายครั้งเพื่อเปลี่ยนการไล่ระดับสี หากคุณละเว้นวิธีนี้สำหรับวัตถุไล่ระดับ การไล่ระดับสีจะไม่ปรากฏให้เห็น คุณต้องสร้างจุดหยุดสีอย่างน้อยหนึ่งจุดเพื่อให้มีการไล่ระดับสีที่มองเห็นได้
| ไวยากรณ์ JavaScript: | การไล่ระดับสี .addColorStop ( หยุด , สี ); |
|---|
ค่าพารามิเตอร์
| Parameter | Description | Play it |
|---|---|---|
| stop | A value between 0.0 and 1.0 that represents the position between start and end in a gradient | |
| color | A CSS color value to display at the stop position |
ตัวอย่างเพิ่มเติม
ตัวอย่าง
กำหนดความลาดชันด้วยวิธีการ addColorStop() หลายวิธี:
จาวาสคริปต์:
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);
❮ อ้างอิงผ้าใบ HTML