本節書摘來自異步社群《html5 canvas開發詳解（第2版）》一書中的第2章，第2.8節,作者： 【美】steve fulton , jeff fulton 更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。
本章已經在讨論建立基本和複雜形狀時，粗略地介紹了顔色和填充樣式。本節将深入探讨形狀的着色和填充。除了這些簡單的着色和填充外，還有很多可用的不同漸變樣式。另外，canvas還可以使用位圖來填充形狀（參見第4章）。
2.8.1 基本填充顔色設定
canvas fillstyle屬性用來設定畫布上形狀的基本顔色和填充。fillstyle使用簡單的顔色名稱。這看起來非常簡單，例如：
下面是出自html4規範的可用顔色字元串值清單。截止到本書出版前，html5還沒有對此另行設定。由于沒有增加html5專屬的顔色，html4的顔色都可以在html5中正确顯示。
提示
所有這些顔色值都可以應用到strokestyle屬性和fillstyle屬性中。
當然，使用顔色名稱字元串并不是指定一個純填充的唯一方法。以下是其他一些方法。
（1）以rgb()方法設定填充色。
rgb()方法可以用24位rgb值指定填充色。
這與上面使用red字元串設定的紅色是一樣的。
（2）以十六進制數字字元串設定填充色。
也可以使用一個十六進制數字字元串設定fillstyle顔色。
（3）以rgba()方法設定填充色。
rgba()方法可以指定32位色值的填充色，其後8位表示透明度。
**context.fillstyle = "rgba(255,0,0,1) ";
**透明度範圍為1（不透明）～0（透明）。
2.8.2 填充漸變形狀
在畫布上建立漸變填充有兩個基本選項：線性或徑向。線性漸變建立一個水準、垂直或者對角線的填充圖案。徑向漸變自中心點建立一個放射狀填充。下面是它們的一些示例。
1．線性漸變
線性漸變有3種基本樣式：水準、垂直和對角線。
（1）線性水準漸變：通過沿對象設定的顔色斷點來控制漸變顔色。
例2-14為建立一個簡單水準漸變，如圖2-23所示。
https://yqfile.alicdn.com/958327ba79fdbd6095a4f65a2077a1f41fcf6275.png" >
建立一個水準漸變，必須先建立一個變量（gr）來指代一個新的漸變，設定方式如下。
createlineargradient方法調用中的4個值是開始漸變的左上角的x坐标和y坐标，以及結束漸變的右下角的x坐标和y坐标。示例從（0，0）開始，到（100，0）結束。請注意，當建立一個水準漸變的時候，y值都是0，建立垂直漸變的時候正好相反。
一旦定義了漸變的大小，就需要使用兩個參數值來加入顔色斷點。第一個是相對位置的開始漸變顔色的漸變原點，第二個是漸變的顔色。相對位置的值必須在0.0～1.0之間。
例2-14中設定的漸變是起點（0）為紅色、中心點（0.5）為綠色、終點（1）為紅色。這将填充一個“紅—綠—紅”漸變形狀。
接下來，應用context.fillstyle生成剛才建立的漸變。
最後，在畫布上建立一個矩形。
請注意，剛剛建立了一個與漸變大小完全相同的矩形。這裡還可以改變輸出矩形的大小，方法如下。
在例2-14的基礎上，例2-15增加了兩個新的填充矩形，如圖2-24所示。請注意，漸變充滿可用空間，最終的顔色填充的區域比定義的漸變區域要大。
① 在邊框上應用水準漸變色。
漸變可以應用到任何形狀，甚至是形狀邊框。例2-16使用例2-15中的填充矩形建立了一個strokerect形狀，而不是建立填充矩形。圖2-25顯示了不同的結果。
https://yqfile.alicdn.com/805a5706f8cf16a8937bc3d5c7e4bf2dab4e89e7.png" >
② 在複雜形狀上應用水準漸變色。
讀者也可以将線性漸變應用到由點組成的封閉形狀，如例2-17所示。如果形狀的起止點相同，就是封閉的。
例2-17使用了context.fill()指令将目前的fillstyle填充到形狀中，輸出效果如圖2-26所示。
圖2-26顯示了通過點建立的新形狀，隻要點是封閉的，填充就會按需要呈現。
（2）垂直漸變色：垂直漸變與水準漸變的建立方式非常類似。不同點在于：y值不全是0，而x值必須全是0。
例2-18顯示了例2-17中建立的水準漸變形狀顯示為垂直漸變的情況，輸出結果如圖2-27所示。
https://yqfile.alicdn.com/94ccaae85547af1611347b24c8ee932a46e84b4d.png" >
例2-18和例2-17的唯一不同之處在于建立線性漸變的線。
水準漸變（例2-17）如下所示。
垂直漸變（例2-18）如下所示。
形狀邊框水準漸變的規則同樣适用于垂直漸變。例2-19将例2-18中的形狀從填充改成描邊，邊框效果如圖2-28所示。
https://yqfile.alicdn.com/f24cc4ff4ac31ab0a73870de3d1ccb529a9a7212.png" >
（3）對角線漸變：讀者可以輕松建立一個對角線漸變，隻需修改createlineargradient()函數的第二個x值和y值。
為建立一個圖2-29所示的完美對角線漸變，可以填充一個與對角線漸變相同大小的正方形。代碼如例2-20所示。
https://yqfile.alicdn.com/db6eaf02b6dce1c27c1dd1c97b110c15725f7dd4.png" >
2．徑向漸變
徑向漸變的定義過程和線性漸變非常類似。盡管徑向漸變需要6個參數設定而線性漸變僅需4個，但是它同樣采用顔色斷點的概念來建立顔色變化。
6個參數用來定義兩個圓的圓心和半徑。第一個圓是開始圈，第二個圓是結束圈。舉例如下。
var gr = context.createradialgradient(50,50,25,50,50,100);
第一個圓的圓心位于（50，50），半徑為25；第二個圓的圓心位于（50，50），半徑為100。
這将會建立兩個同心圓，然後向線性漸變那樣設定顔色斷點。
例2-21将這些代碼合并起來，結果如圖2-30所示。
https://yqfile.alicdn.com/a49ef55e33171214fada30a15a46b284220ca304.png" >
例2-22将第二個圓遠離第一個圓，産生的效果如圖2-31所示。
如同線性漸變一樣，複雜形狀同樣可以進行徑向漸變填充。例2-23對本章前面的弧形示例應用了徑向漸變，結果如圖2-32顯示。
例2-23将例2-22的徑向漸變應用到圓上，而不是應用到矩形上。這樣就清除了形狀背景的紅色正方形。
也可以将徑向漸變應用到弧形描邊，就像填充那樣。代碼如例2-24所示，效果如圖2-23所示。
例2-24建立了一個比例2-23中小一點的圓，徑向漸變将顯示在弧形的邊框上。如果與例2-23中的圓大小相同，這裡将得到一個純紅色填充，因為徑向漸變在圓形直徑邊緣将是純紅色。