例
定義一個漸變，從黑到白的雲，為矩形的填充樣式：
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); 試一試» 瀏覽器支持
在表中的數字規定，完全支持方法的第一個瀏覽器版本。
| 方法 | |||||
|---|---|---|---|---|---|
| addColorStop() | 4 | 9 | 3.6 | 4 | 10.1 |
定義和用法
所述addColorStop()方法指定的梯度對象的顏色和位置。
所述addColorStop()方法與一起使用createLinearGradient()或createRadialGradient()
Note:您可以撥打addColorStop()方法多次更改漸變。 如果省略梯度對象這種方法，梯度將不可見。 您需要至少創建一個色標有明顯的梯度。
| JavaScript語法： | gradient 。 addColorStop( stop , color ) ; |
|---|
參數值
| 參數 | 描述 | 播放 |
|---|---|---|
| stop | 在0.0和1.0之間的值，該值表示在梯度開始和結束之間的位置 | 播放 ” |
| color | 甲CSS顏色值 ，以顯示在所述stop位置 | 播放 ” |
更多示例
例
定義具有多個梯度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);
試一試»