Canvas addColorStop() 方法
示例
定義一個從黑到白的漸變並用它來填充一個矩形
JavaScript
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// 建立一個漸變
const grd = ctx.createLinearGradient(0, 0, 170, 0);
grd.addColorStop(0, "black");
grd.addColorStop(1, "white");
// 繪製一個填充矩形
ctx.fillStyle = grd;
ctx.fillRect(20, 20, 150, 100);
自己動手試一試 »
描述
addColorStop() 方法指定漸變物件中的顏色和位置。
addColorStop() 方法與 線性漸變物件 和 徑向漸變物件 一起使用。
注意
您必須向漸變物件新增顏色停止點才能使漸變可見。
另請參閱
createLinearGradient() 方法 (建立漸變物件)
createRadialGradient() 方法 (建立漸變物件)
fillStyle 屬性 (設定填充顏色/樣式)
strokeStyle 屬性 (設定描邊顏色/樣式)
語法
| gradient.addColorStop(停止位置, 顏色) |
引數值
| 引數 | 描述 | 試一試 |
|---|---|---|
| 停止 | 一個介於 0 和 1 之間的值。漸變開始和結束之間的位置 | 試一試 » |
| color | 在 停止位置 顯示的 CSS 顏色值 | 試一試 » |
返回值
| 無 |
更多示例
示例
使用多個 addColorStop() 方法定義漸變
JavaScript
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const 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);
自己動手試一試 »
瀏覽器支援
<canvas> 元素是 HTML5 標準（2014）。
addColorStop() 支援所有現代瀏覽器
| Chrome | Edge | Firefox | Safari | Opera | IE |
| 是 | 是 | 是 | 是 | 是 | 9-11 |
