今天在学习canvas时，遇到canvas的fillstyle有一个createRadialGradient()方法，创建放射性渐变。
上代码：
<!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag. </canvas> <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var grd=ctx.createRadialGradient(70,70,0,90,90,30); grd.addColorStop(0,"red"); grd.addColorStop(1,"white"); ctx.fillStyle=grd; ctx.fillRect(0,0,300,150); </script> </body> </html>
其中createRadialGradient有五个参数：
var grd=ctx.createRadialGradient(70,70,0,90,90,30);
分别为：开始圆的 X 坐标、开始圆的 Y 坐标、开始圆的半径、结束圆的 X 坐标、结束圆的 Y 坐标、结束圆的半径。（坐标都是相对于canvas画布的值）
ctx.fillRect(0,0,300,150);
这一句的几个参数是需要填充的位置： 矩形左上角 X 坐标、 Y 坐标、 右下角 X 坐标、Y 坐标。
正常情况下，开始圆的圆心在结束圆范围内时，效果入下：
var grd=ctx.createRadialGradient(70,70,0,90,90,50);
开始圆的圆心偏移，中间的深色部分偏移。偏移到结束圆边界时，效果入下：
var grd=ctx.createRadialGradient(55,55,0,90,90,50);
当开始圆圆心坐标位于结束圆范围外时，出现特殊现象：
var grd=ctx.createRadialGradient(40,40,0,90,90,50);
偏移越多，效果越明显：
var grd=ctx.createRadialGradient(20,20,0,90,90,50);
一开始看到这个效果感到很奇怪。弄明白后觉得可能以后用得到，记录一下。
原文：http://www.cnblogs.com/eoff/p/5068135.html