本節書摘來自異步社群《html5 canvas開發詳解》一書中的第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位表示透明度。
透明度範圍從1（不透明）到0（透明）。
2.8.2 填充漸變形狀
在畫布上建立漸變填充有兩個基本選項：線性或者徑向。線性漸變建立一個水準、垂直或者對角線的填充圖案。徑向漸變自中心點建立一個放射狀填充。下面是它們的一些示例。
線性漸變
線性漸變有3種基本樣式：水準、垂直和對角線。通過沿對象設定的顔色斷點來控制漸變顔色。例2-14為建立一個簡單水準漸變，如圖2-23所示。
建立一個水準漸變，必須首先建立一個變量（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-15在例2-14的基礎上增加了兩個新的填充矩形，如圖2-24所示。請注意漸變填充滿可用空間，最終的顔色填充的區域比定義的漸變區域要大。
https://yqfile.alicdn.com/de2dfd24cc5b694ecdfe8b19069bbbe659ce7831.png" >
漸變可以應用到任何形狀，甚至是形狀邊框。例2-16使用例2-15中的填充矩形建立了一個strokerect形狀，而不是填充矩形。圖2-25顯示不同的結果。
https://yqfile.alicdn.com/db5b33da2a6e05ba92839799dfcbab27a472a9fc.png" >
讀者也可以将線性漸變應用到由點組成的封閉形狀，如例2-17所示。如果形狀的起止點相同就是封閉的。
例2-17使用context.fill()指令将目前的fillstyle填充到形狀中，輸出效果如圖2-26所示。
https://yqfile.alicdn.com/5a4078c93d7ec1f507201e4a9584d1f0567199d7.png" >
圖2-26顯示了通過點建立的新形狀，隻要點是封閉的，填充就會按需要呈現。
垂直漸變與水準漸變的建立方式非常類似。不同點在于y值不全是0，而x值必須全是0。例2-18顯示了例2-17中建立的水準漸變形狀顯示為垂直漸變的情況，輸出結果如圖2-27所示。
例2-18和例2-17的唯一不同在于建立線性漸變的線。
水準漸變（例2-17）如下所示。
垂直漸變（例2-18）如下所示。
形狀邊框水準漸變的規則同樣适用于垂直漸變。例2-19将例2-18中的形狀從填充改成描邊，邊框效果如圖2-28所示。
https://yqfile.alicdn.com/7207dbd6d18c164c2fdcff3d3b05848439bfa8b8.png" >
對角線漸變。讀者可以輕松建立一個對角線漸變，隻需修改createlineargradient()函數的第二個x和y值。
為建立一個如圖2-29所示的完美對角線漸變，可以填充一個與對角線漸變相同大小的正方形。代碼如例2-20所示。
徑向漸變
徑向漸變的定義過程和線性漸變非常類似。盡管徑向漸變需要6個參數設定而線性漸變僅需4個，它同樣采用顔色斷點的概念來建立顔色變化。
6個參數用來定義兩個圓的圓心和半徑。第一個圓是開始圈，第二個圓是結束圈。舉例如下。
第一個圓的圓心位于（50，50），半徑為25；第二個圓的圓心位于（50，50），半徑為100。
這将會建立兩個同心圓，然後向線性漸變那樣設定顔色斷點。
例2-21将這些代碼合并起來，結果如圖2-30所示。
https://yqfile.alicdn.com/9e29eb6e6dc0698828ecf836fcfe7b1ff2dd317d.png" >
例2-22将第二個圓遠離第一個圓，産生的效果如圖2-31所示。
如同線性漸變一樣，複雜形狀同樣可以進行徑向漸變填充。例2-23對本章前面的弧形示例應用了徑向漸變，結果如圖2-32顯示。
例2-23将例2-22的徑向漸變應用到圓上，而不是應用到矩形。這樣就清除了形狀背景的紅色正方形。
也可以将徑向漸變應用到弧形描邊，就像填充那樣，如例2-24和圖2-23所示。
https://yqfile.alicdn.com/cd2f34701e5e32ef962a7c61f31a738b925e10ec.png" >
例2-24建立了一個比例2-23中小一點的圓，那麼徑向漸變将顯示在弧形的邊框上。如果與例2-23中的大小相同，這裡将得到一個純紅色填充，因為徑向漸變在圓形直徑邊緣上将是純紅色。