canvas提供了很多對顔色進行操作的api，可實作漸變、反色等效果。這一節中将舉例說明如何實作這些效果。
3.2.1 繪制顔色漸變效果的圖形
顔色的漸變分為線性漸變和徑向漸變，下面分别進行說明。
1 . 線性漸變
使用createlineargradient函數和addcolorstop函數可以實作線性漸變功能。
createlineargradient函數的原型如下：
其中的4個參數分别是漸變的出發點坐标(x1，y1)與終點坐标(x2，y2)。
addcolorstop函數的原型如下：
其中，position 參數必須是一個 0.0 到 1.0 之間的數值，表示漸變中顔色地點的相對地位；color參數表示漸變的顔色。
它的繪制如代碼清單3-15所示。
代碼清單 3-15
繪制效果如圖3-20所示。
2 . 徑向漸變
使用createradialgradient函數和addcolorstop函數可以實作徑向漸變功能。
createradialgradient函數的原型如下：
其中，參數x0、y0為開始圓的圓心坐标，r0為開始圓的直徑；x1、y1為結束圓的圓心坐标，r1為結束圓的直徑。
createradialgradient函數的使用方法如代碼清單3-16所示。
代碼清單 3-16
運作效果如圖3-21所示。
3.2.2 顔色合成之globalcompositeoperation屬性
globalcompositeoperation 屬性說明了繪制到畫布上的顔色是如何與畫布上已有的顔色組合起來的。下面列出了其中可能要設定的值以及它們的含義。這些值中的source一詞指的是将要繪制到畫布上的顔色，而destination指的是畫布上已經存在的顔色，其預設值是source-over。
copy：隻繪制新圖形，删除其他所有内容。
darker：在圖形重疊的地方，其顔色由兩個顔色值相減後決定。
destination-atop：畫布上已有的内容隻會在它和新圖形重疊的地方保留。新圖形繪制于内容之後。
destination-in：在新圖形及畫布上已有圖形重疊的地方，畫布上已有内容都保留。所有其他内容均為透明的。
destination-out：在畫布上已有内容和新圖形不重疊的地方，已有内容保留。所有其他内容均為透明的。
destination-over：新圖形繪制于畫布上已有内容的後面。
lighter：在圖形重疊的地方，其顔色由兩種顔色值的加值來決定。
source-atop：隻有在新圖形和畫布上已有内容重疊的地方才繪制新圖形。
source-in：在新圖形以及畫布上已有内容重疊的地方才繪制新圖形。所有其他内容均為透明的。
ource-out：隻有在和畫布上已有圖形不重疊的地方才繪制新圖形。
source-over：新圖形繪制于畫布上已有圖形的頂部。這是預設的設定。
xor：在重疊和正常繪制的其他地方，圖形都成為透明的。
為了友善大家了解，我們來看看相關代碼，如代碼清單3-17所示。
代碼清單 3-17
運作效果如圖3-22所示。
代碼清單3-14中設定了globalcompositeoperation的屬性為source-over，表示新圖形繪制于已有圖形的頂部。
其他屬性實作的效果如圖3-23至圖3-33所示。
以上就是globalcompositeoperation所有屬性的效果圖。
3.2.3 顔色反轉
所謂顔色反轉，就是對圖形的每個像素進行顔色取反，如代碼清單3-18所示。
代碼清單 3-18
運作效果如圖3-34所示。
3.2.4 灰階控制
在遊戲的制作過程中，有時候需要将圖檔變為灰色，其做法與3.2.3節所介紹的内容相似。首先對圖形的每個像素進行灰階計算，如代碼清單3-19所示。
代碼清單 3-19
運作效果如圖3-35所示。
3.2.5 陰影效果
canvas api 中包含了自動為你所繪制的任何圖形添加下拉陰影的屬性。陰影的顔色可用 shadowcolor 屬性來指定，并且可以通過 shadowoffsetx 和 shadowoffsety 屬性來改變。另外，應用到陰影邊緣的羽化量也可以使用 shadowblur 屬性來設定。代碼清單3-20給圖檔加上了紅色陰影。
代碼清單 3-20
運作效果如圖3-36所示。
在代碼清單3-20中，下列代碼表示設定陰影的顔色為紅色。
下列代碼指定羽化陰影的程度為10。
下列代碼指定陰影的水準偏移量和垂直偏移量。
以上幾個屬性中從字面上不太容易了解的是羽化程度shadowblur。代碼清單3-21将陰影的羽化程度設為了100，這樣大家就可以看到差別了。
代碼清單 3-21
運作效果如圖3-37所示。