漸變是指在顏色集上使用逐步抽樣算法，並將結果應用於描邊樣式和填充樣式中。使用漸變需要三個步驟：
(1) 創建漸變對象；
(2) 為漸變對象設置顏色，指明過渡方式；
(3) 在context上為填充樣式或者描邊樣式設置漸變。
可以將漸變看做是顏色沿着一條線進行緩慢地變化。例如，如果為漸變對象提供了A、B兩個點，不論是繪制還是填充，只要從A移動到B，都會帶來顏色的變化。
要設置顯示哪種顏色，在漸變對象上使用addColorStop函數即可。這個函數允許指定兩個參數：顏色和偏移量。顏色參數是指開發人員希望在偏移位置描邊或填充時所使用的顏色。偏移量是一個0.0到1.0之間的數值，代表沿着漸變線漸變的距離有多遠。
假如要建立一個從點(0,0)到點(0,100)的漸變，並指定在0.0偏移位置使用白色，在1.0偏移位置使用黑色。當使用繪制或者填充的動作從(0,0)畫到(0,100)后，就可以看到顏色從白色（起始位置）漸漸轉變成了黑色（終止位置）。
除了可以變換成其他顏色外，還可以為顏色設置alpha值（例如透明），並且alpha值也是可以變化的。為了達到這樣的效果，需要使用顏色值的另一種表示方法，例如內置alpha組件的CSS rgba函數。
下面我們通過示例來詳細了解如何使用兩個漸變來填充（相應的函數為fillRect）矩形區域，並形成最終的樹干，見代碼清單2-16。
代碼清單2-16 使用漸變
- // 創建用作樹干紋理的三階水平漸變
- var trunkGradient = context.createLinearGradient(-5, -50, 5, -50);
- // 樹干的左側邊緣是一般程度的棕色
- trunkGradient.addColorStop(0, '#663300');
- // 樹干中間偏左的位置顏色要淡一些
- trunkGradient.addColorStop(0.4, '#996600');
- // 樹干右側邊緣的顏色要深一些
- trunkGradient.addColorStop(1, '#552200');
- // 使用漸變色填充樹干
- context.fillStyle = trunkGradient;
- context.fillRect(-5, -50, 10, 50);
- // 接下來，創建垂直漸變，以用作樹冠在樹干上投影
- var canopyShadow = context.createLinearGradient(0, -50, 0, 0);
- // 投影漸變的起點是透明度設為50%的黑色
- canopyShadow.addColorStop(0, 'rgba(0, 0, 0, 0.5)');
- // 方向垂直向下，漸變色在很短的距離內迅速漸變至完全透明，
這段長度之外的樹干上沒有投影 - canopyShadow.addColorStop(0.2, 'rgba(0, 0, 0, 0.0)');
- // 在樹干上填充投影漸變
- context.fillStyle = canopyShadow;
- context.fillRect(-5, -50, 10, 50);
除了我們剛才用到的線性漸變以外，HTML5 Canvas API還支持放射性漸變，所謂放射性漸變就是顏色會介於兩個指定圓間的錐形區域平滑變化。放射性漸變和線性漸變使用的顏色終止點是一樣的，不過參數如代碼清單2-17所示。
代碼清單2-17 使用放射性漸變的示例
- createRadialGradient(x0, y0, r0, x1, y1, r1)
代碼中，前三個參數代表以(x0,y0)為圓心，r0為半徑的圓，后三個參數代表以(x1,y1)為圓心，r1為半徑的另一個圓。漸變會在兩個圓中間的區域出現。