Html5 Canvas初探學習筆記(9) -漸變

本篇繼續介紹html5的繪製效果，和先前介紹的不同，本篇介紹的漸變並不是一個狀態值，他是先前介紹的fillStyle 的一個值。首先來看一個範例：

#程式碼如下：

var gradient = context.createLinearGradient(50,50,150,150);
gradient.addColorStop(0,"rgb(0,0,0)");
gradient.addColorStop(1,"rgb(0,255,0)");
context.fillStyle = gradient;
context.fillRect(50,50,100,100);

這是一個線性漸變，首先透過createLinearGradient建立線性漸變，四個參數分別為起點的橫縱座標和終點的橫縱座標，然後為兩個點加入色值，addColorStop的0為起點，##1為終點，第二個參數是顏色，可以是rgb

也可以是

rgba
。

前一個是線性漸變，還有弧形漸變，效果如下：

程式碼如下：

var gradient = context.createRadialGradient(50,50,5,150,150,10);
gradient.addColorStop(0,"rgb(0,0,0)");
gradient.addColorStop(1,"rgb(0,255,0)");
context.fillStyle = gradient;
context.fillRect(50,50,100,100);

createRadialGradient

前三個參數為起點圓的圓心橫縱座標，圓半徑。後三個參數如下是終點圓圓心座標和圓的半徑。

#使用圓形漸層可以畫出中心開始的漸變，效果如下：

程式碼如下：

var gradient = context.createRadialGradient(100,100,0,100,100,72);
gradient.addColorStop(0,"rgb(0,0,0)");
gradient.addColorStop(1,"rgb(0,255,0)");
context.fillStyle = gradient;
context.fillRect(50,50,100,100);

起點和終點是正方形的中心，半徑不同就可以造出這種效果。 ###### 以上就是Html5 Canvas初探學習筆記(9) -漸變 的內容，更多相關內容請關注PHP中文網（www.php.cn）！ ################