HTML canvas addColorStop() 方法

實(shí)例

定義一個(gè)從黑到白的漸變，作為矩形的填充樣式：

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);

運(yùn)行代碼 ?

瀏覽器支持

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 addColorStop() 方法。

注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。

定義和用法

addColorStop() 方法規(guī)定漸變對(duì)象中的顏色和位置。

addColorStop() 方法與 createLinearGradient() 或 createRadialGradient() 一起使用。

注意：您可以多次調(diào)用 addColorStop() 方法來改變漸變。如果您不對(duì)漸變對(duì)象使用該方法，那么漸變將不可見。為了獲得可見的漸變，您需要?jiǎng)?chuàng)建至少一個(gè)色標(biāo)。

JavaScript 語(yǔ)法：	gradient.addColorStop(stop,color);

參數(shù)值

參數(shù)	描述
stop	介于 0.0 與 1.0 之間的值，表示漸變中開始與結(jié)束之間的位置。
color	在 stop 位置顯示的 CSS 顏色值。

實(shí)例

通過多個(gè) 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);

運(yùn)行代碼 ?

HTML canvas 參考手冊(cè)其他擴(kuò)展

上一篇：HTML canvas createRadialGradient() 方法下一篇：HTML canvas lineCap 屬性

中文字幕一区二区人妻电影,亚洲av无码一区二区乱子伦as ,亚洲精品无码永久在线观看,亚洲成aⅴ人片久青草影院按摩,亚洲黑人巨大videos

HTML canvas addColorStop() 方法

實(shí)例

瀏覽器支持

定義和用法

參數(shù)值

更多實(shí)例

實(shí)例