效果:
http://hovertree.com/texiao/html5/canvas/1/
代碼：
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html;charset=gbk" /> 4 <script type="text/javascript"> 5 function draw(){ 6 var ctx = document.getElementById('canvas').getContext('2d'); 7 for (var i=0;i<6;i++){ 8 for (var j=0;j<6;j++){ 9 ctx.fillStyle = 'rgb(' + Math.floor(255-42.5*i) + ',' +Math.floor(255-42.5*j) + ',0)'; 10 ctx.fillRect(j*25,i*25,25,25); 11 } 12 } 13 } 14 </script> 15 <title>測試fillStyle - 何問起</title> 16 <meta name="description" content="何問起,hovertree.com" /><meta name="keywords" content=" hovertree.com,何問起" /> 17 18 </head> 19 <body onload="draw();" > 20 <canvas id="canvas" width="400" height="300"> 21 </canvas> 22 <a href="http://hovertree.com/h/bjaf/a064shrh.htm">何問起</a> 23 </body> 24 </html>
更多：http://www.cnblogs.com/roucheng/p/texiao.html
http://hovertree.com/texiao/html5/canvas/2/
如果我們想要給圖形上色，有兩個重要的屬性可以做到：fillStyle 和 strokeStyle。
fillStyle = color
strokeStyle = color
strokeStyle 是用於設置圖形輪廓的顏色，而 fillStyle 用於設置填充顏色。color 可以是表示 CSS 顏色值的字符串，漸變對象或者圖案對象。默認情況下，線條和填充顏色都是黑色(CSS 顏色值 #000000)。
下面的例子都表示同一種顏色。
// 這些 fillStyle 的值均為 '橙色'
ctx.fillStyle = "orange";
ctx.fillStyle = "#FFA500";
ctx.fillStyle = "rgb(255,165,0)";
ctx.fillStyle = "rgba(255,165,0,1)";
注意: 目前 Gecko 引擎並沒有提供對所有的 CSS 3 顏色值的支持。例如，hsl(100%,25%,0) 或者 rgb(0,100%,0) 都不可用。
注意: 一旦您設置了 strokeStyle 或者 fillStyle 的值，那么這個新值就會成為新繪制的圖形的默認值。如果你要給每個圖形上不同的顏色，你需要重新設置 fillStyle 或 strokeStyle 的值。
http://hovertree.com/texiao/html5/canvas/3/
Canvas填充樣式fillStyle
說明
在本示例里，我會再度用兩層for循環來繪制方格陣列，每個方格不同的顏色。結果如圖，但實現所用的代碼卻沒那么絢麗。我用了兩個變量i和j 為每一個方格產生唯一的RGB色彩值，其中僅修改紅色和綠色通道的值，而保持藍色通道的值不變。你可以通過修改這些顏色通道的值來產生各種各樣的色板。通過增加漸變的頻率，你還可以繪制出類似 Photoshop 里面的那樣的調色板。