Canvas addColorStop() 方法
定義和用法
addColorStop() 方法規定 gradient 對象中的顏色和位置。
addColorStop() 方法與 createLinearGradient() 或 createRadialGradient() 一起使用。
注釋：您可以多次調用 addColorStop() 方法來改變漸變。如果您不對 gradient 對象使用該方法，那么漸變將不可見。為了獲得可見的漸變，您需要創建至少一個色標。
實例
例子 1
定義一個從黑到白的漸變，作為矩形的填充樣式：
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);
提示：頁面底部提供更多實例。
語法
gradient.addColorStop(stop,color);
參數值
| 參數 | 描述 |
|---|---|
| stop | 介于 0.0 與 1.0 之間的值，表示漸變中開始與結束之間的位置。 |
| color | 在結束位置顯示的 CSS 顏色值。 |
更多實例
例子 2
通過多個 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);
瀏覽器支持
表中的數字注明了首個完全支持該屬性的瀏覽器版本。
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
注釋：Internet Explorer 8 以及更早的版本不支持 <canvas> 元素。
