html5 Canvas畫圖4：填充和漸層

一般繪圖的方式有兩種，即填充和描邊，前面的文章已經講了描邊的方法stroke，本文就講一下Canvas中填充圖形的方法。

填充即fill(),很直白吧？而且和strokeStyle表示描邊樣式一樣，fillStyle即表示填充樣式。

ctx.fillStyle = '顏色';

預設的填充樣式是不透明的黑色

提問：未閉合的路徑可以填充嗎？

可以。Canvas會從你當前路徑的終點直接連接到起點，然後填充。

但你可以發現，最後一段沒有描邊。

記得我們前一篇文章用4條線畫了一個正方形，但canvas不會這麼差勁，連直接繪製矩形的函數都沒有。你可以使用fillRect()直接填充一個矩形：

ctx.fillRect(x,y,width,height);

這裡的x,y是指矩形的左上方起點的座標，記住。

說到fillRect，就不得不提strokeRect，你猜對了，他的意思就是直接描邊出一個矩形。

還有fillText與strokeText，至於作用嘛，你可能都猜到了，我這裡先不講，大家先預習吧。

Canvas填滿漸層色

在Canvas中，漸層色同樣分為兩種，即線性漸層和放射狀漸層，而且建立他們的方法也是獨立的。我們先看如何建立線性漸層。

建立線性漸層=createLinearGradient——看，依然很直接的單詞。他的文法如下：

createLinearGradient(x1,y1,x2,y2)

有4個參數呢！看起來好複雜，其實這個挺簡單的，因為我們前面已經說了，平面世界裡的一個點是由x座標和y座標確定的。所以，x1,y1就是表示線性漸層的起點座標，x2,y2就表示終點座標。

這樣做的好處很明顯，如果我們想建立一個斜著的線性漸層，很方便。但我們先建立一個水平的線性漸層試試吧。

var linear = ctx.createLinearGradient(100,100,200,100);

漸層好像建立了，那麼我們可以填充了嗎？————這個漸層是空的，沒有顏色。

往漸層條裡加顏色的方法是addColorStop(位置,顏色).但要注意了，這個addColorStop不是加在畫筆上，而是加在前面的那個儲存漸層的變數上，我這裡是linear.

var linear = ctx.createLinearGradient(100,100,200,100);linear.addColorStop(0,'#fff');linear.addColorStop(0.5,'#f0f');linear.addColorStop(1,'#333');

我這裡用了3個addColorStop，即為漸層條加上了3個顏色。

注意：addColorStop的位置參數，永遠是介於0-1之間的數字,可以是兩位小數，表示百分比。他沒法接收’3px’這樣的參數。

這時候，我們就可以填滿漸層色了，但我們必須先把定義好的漸層賦給fillStyle.

var linear = ctx.createLinearGradient(100,100,200,100);linear.addColorStop(0,'#fff');linear.addColorStop(0.5,'#f0f');linear.addColorStop(1,'#333');ctx.fillStyle = linear; //把漸層賦給填充樣式ctx.fillRect(100,100,100,100);ctx.stroke();//無用

注意，fillRect與strokeRect畫出的都是獨立的路徑，如上面的代碼，在fillRect後調用描邊，並不會把剛剛畫出的矩形描邊，strokeRect同理。

經過測試後，發現了一個很蛋疼的問題，就是線性漸層的座標是相對於整個Canvas範圍而言的。比如我這裡，我的線性漸層起點就是100,100，如果我畫了一個矩形在0,0的位置，用這個漸層來填充，就會發現沒有填充——因為我的漸層的範圍根本就超過了矩形的範圍。

這真是一個坑爹的設定。

提問：漸層起點之前與漸層終點之後還會填充顏色嗎？

會。起點之前的顏色就是起點色，終點之後的顏色一直是終點色。

如何終止終點色，你可以在結束色之後再填一個透明的結束色。如：

linear.addColorStop(0.99,'#333');linear.addColorStop(1,'rgba(51,51,51,0)');

依照前面的計劃，我再建一個傾斜的線性漸層試試。只需要改createLinearGradient的參數即可.

var linear = ctx.createLinearGradient(100,100,200,200);

效果

然後，讓我們來試試放射狀漸層（圓形漸層）。與createLinearGradient類似，建立放射狀漸層的方法是：createRadialGradient,但他們的參數可大不相同：

createRadialGradient(x1,y1,r1,x2,y2,r2)

其中的x1,y1,x2,y2依舊錶示起點和終點，不過這裡的起點和終點都是一個圓，而x,y則是圓心的座標。所以，r1與r2分別是起點圓的半徑和終點圓的半徑。

在我的印象中，貌似放射狀漸層就是一個圓，圓心就是起點，圓的半徑就是終點。但canvas裡面的放射狀漸層竟然搞的不一樣了，起點一個圓，終點一個圓，和我的理解有差距。

我們從最簡單的做起。首先，做一個很正規的放射狀漸層，即漸層圓形的圓心就是漸層的起點。由於正規的放射狀漸層，漸層中心即圓心，所以我們應該盡量避免發生偏斜。那麼，我們把終點圓的圓心與起點圓的圓心重合吧？

var radial = ctx.createRadialGradient(55,55,10,55,55,55); //重合的圓心座標radial.addColorStop(0,'#fff');radial.addColorStop(0.5,'#ff0');radial.addColorStop(0.9,'#555');radial.addColorStop(1,'#f00');

這裡我設定的放射狀漸層起點圓和終點圓的圓心座標相同，而起點圓半徑為10，終點圓半徑為55.最後畫出的放射狀漸層範圍是一個寬高110的圓形，說明漸層範圍以終點圓的範圍為準。

（可以看到終點圓範圍之外還是有顏色，這個顏色就是終點色，但是，如果你企圖使用radial.addColorStop(1.5,’#0f0′);這樣來定義漸層範圍之外的顏色，你還是會收到一個錯誤）.

那麼，起點圓的半徑有什麼用呢？——本來正常的放射狀漸層的中心（姑且稱之為“變心”…吧）只是一個點，不應該是一個圓的。其實我們沒錯，這個起點圓就相當於一個圓點而已,只是可能比較大。

讓我們把起點圓的半徑變得很大，接近於終點圓的半徑：

var radial = ctx.createRadialGradient(55,55,50,55,55,55); //很接近

其他的colorStop都不變，然後圖形就變成了這個樣子。

也就是說，canvas中放射狀漸層的起點色，是從起點圓的範圍之外繪製的，而起點圓的整個顏色都是起點色。

我們把起點圓的半徑設為0，那放射狀漸層的“變心”，就真的是一個點了。

大部分時候我們都不需要很正規的放射狀漸層，反而希望他的變心是位移的，類似：

這個時候，canvas放射狀漸層兩個圓的優勢就出來了，只要我們起點圓與終點圓的圓心不重合，那變心也就會位移：

var radial = ctx.createRadialGradient(75,75,0,55,55,55);

但此時的漸層範圍依然是終點圓的範圍哈。

很多人天生就有一種搞破壞的心理，比如這裡，終點圓的半徑總比起點圓大，但如果把他們反過來會怎麼樣呢？

var radial = ctx.createRadialGradient(75,75,55,55,55,0);

經測試，這樣不會報錯，只是原來的從內到外的漸層反過來變成了從外到內的漸層了。這是個好用法。

還有個問題，如果我們把起點圓的圓心位移了，並且起點圓的範圍超出了終點圓的範圍，

這時會發生什嗎？

啊！？這是什麼情況？！

當起點圓和終點圓只有部分重疊的時候，就會出現這種情況。所以，如果你需要正常的放射狀漸層，請保證其中一個圓完全包住了另一個圓。

後記：既然漸層可以賦給fillStyle，那麼也可以賦給strokeStyle。效果你懂的。

唉，寫文章寫的好辛苦。國外空間圖片載入慢，所以圖片全部都是外鏈，靠

原文