Canvas使用渐变之-径向渐变详解
创建径向渐变使用
createRadialGrdient(x0,y0,r0,x1,y1,r1)
一共六个参数，分别代表：
起点的圆心坐标（第一个和第二个参数），
起点园的半径（第三个参数），
终点的圆心坐标（第四个和第五个参数），
终点的圆心半径（第六个参数）。
该方法返回CanvasGradient对象，该对象定义了addColorStop方法。
addColorStop(,)；
两个参数，第一个是要添加颜色的位置，第二个是要添加的纯色。
代码示例：
1 var ctx = document.querySelector('canvas').getContext('2d'); 2 3 var grad = ctx.createRadialGrdient(250，70，20，200，60，100)； 4 5 grad.addColorStop(0,'red'); 6 7 grad.addColorStop(0.5,'green'); 8 9 grad.addColorStop(1,'blue'); 10 11 12 13 ctx.fillStyle = grad; 14 15 ctx.fillRect(0,0,500,140);
在这个例子里，起点圆比较小，被终点圆包围，当我们给这个渐变添加颜色的时候，他们会被放置在起点圆边界和终点圆边界之间的一条线段上。就是addColorStop里面的的0-1之间。
因此我们可以指定这两个圆的位置，所以圆边界之间的距离可能会有变化，颜色渐变速度可能也会有所不同。
注意：当你设定的两个圆不存在包含关系的时候要小心，不同浏览器对于如何开始渐变存在不一致性，结果也很混乱。
可结合另一篇文章《Canvas使用渐变之-线性渐变详解》一起阅读理解。
