HTML5中canvas元素除了繪制線性漸變以外，還可以繪制徑向漸變。徑向漸變是指沿著圓形的半徑方向向外進行擴散的漸變方式。比如在描繪太陽是，沿著太陽的半徑方向向外擴散出去的光暈，就是一種徑向漸變。
HTML5移動開發即學即用(雙色) PDF+源碼 http://www.linuxidc.com/Linux/2013-09/90351.htm
HTML5入門學習筆記 http://www.linuxidc.com/Linux/2013-09/90089.htm
HTML5移動Web開發筆記 http://www.linuxidc.com/Linux/2013-09/90088.htm
HTML5 開發中的本地存儲的安全風險 http://www.linuxidc.com/Linux/2013-06/86486.htm
《HTML5與CSS3權威指南》及相配套源碼 http://www.linuxidc.com/Linux/2013-02/79950.htm
關於 HTML5 令人激動的 10 項預測 http://www.linuxidc.com/Linux/2013-02/79917.htm
HTML5與CSS3實戰指南 PDF http://www.linuxidc.com/Linux/2013-02/79910.htm
canvas繪制徑向漸變的腳本文件：
<!DOCTYPE html><head><metacharset="UTF-8"/><script>function draw(id){var canvas = document.getElementById(id);if(canvas ==null)returnfalse;var context = canvas.getContext('2d');var g1 = context.createRadialGradient(400,0,0,400,0,400);
g1.addColorStop(0.1,'rgb(255,255,0)');
g1.addColorStop(0.3,'rgb(255,0,255)');
g1.addColorStop(1,'rgb(0,255,255)');
context.fillStyle = g1;
context.fillRect(0,0,400,300);var n =0;var g2 = context.createRadialGradient(250,250,0,250,250,300);
g2.addColorStop(0.1,'rgba(255,0,0,0.5)');
g2.addColorStop(0.7,'rgba(255,255,0,0.5)');
g2.addColorStop(1,'rgba(0,0,255,0.5)');for(var i =0; i <10; i++){
context.beginPath();
context.fillStyle = g2;
context.arc(i *25, i *25, i *10,0,Math.PI *2,true);
context.closePath();
context.fill();}}</script></head><bodyonLoad="draw('canvas');"><canvasid="canvas"width="400"height="300"/></body></html>
createRadialGradient() 方法創建一條放射顏色漸變，這個方法創建並返回了一個新的 CanvasGradient 對象，該對象在兩個指定圓的圓周之間放射性地插值顏色。
createLinearGradient(xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd)
xStart, yStart 開始圓的圓心的坐標，radiusStart 開始圓的直徑，xEnd, yEnd 結束圓的圓心的坐標，radiusEnd 結束圓的直徑。
上面的實例中，分別指定了兩個圓的大小和位置。從第一個圓的圓心處像外進行擴散漸變，一直擴散到第二個圓的外輪廓出。
在設定顏色時，與線性漸變相同，使用addColorStop方法進行設定即可。同樣也需要設定0-1之間的浮點數來作為漸變轉折點的偏移量。