HTML canvas 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(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
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);
嘗試一下»
瀏覽器支持
Internet Explorer 9、Firefox、Opera、Chrome 和Safari 支持addColorStop() 方法。
注意: Internet Explorer 8及之前的版本不支持<canvas>元素。
定義和用法
addColorStop() 方法規定漸變對像中的顏色和位置。
addColorStop()方法與createLinearGradient()或createRadialGradient()一起使用。
注意:您可以多次調用addColorStop()方法來改變漸變。如果您不對漸變對象使用該方法,那麼漸變將不可見。 為了獲得可見的漸變,您需要創建至少一個色標。
JavaScript 語法: | gradient.addColorStop(stop,color); |
---|
參數值
参数 | 描述 |
---|---|
stop | 介于 0.0 与 1.0 之间的值,表示渐变中开始与结束之间的位置。 |
color | 在stop位置显示的 CSS 颜色值 。 |
更多實例
實例
通過多個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);
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 canvas參考手冊