1、canvas中渐变方式有2种：线性渐变和径向梯度渐变
createLineGradient()
createRadialGradient()
addColorStop(var1,var2);
var1 取值在0-1之间
var2 是颜色值
前面有讲述线性渐变的作用，渐变是一个渐变对象
径向渐变方法createRadialGradient创建放射状/圆形渐变对象
context.createRadialGradient(x0,y0,r0,x1,y1,r1);
渐变可用于填充矩形、圆形、线条、文本等等。
1：请使用该对象作为 strokeStyle 或 fillStyle 属性的值。
2：请使用 addColorStop() 方法规定不同的颜色，以及在 gradient 对象中的何处定位颜色
| 参数 | 描述 |
|---|---|
| x0 | 渐变的开始圆的 x 坐标 |
| y0 | 渐变的开始圆的 y 坐标 |
| r0 | 开始圆的半径 |
| x1 | 渐变的结束圆的 x 坐标 |
| y1 | 渐变的结束圆的 y 坐标 |
| r1 | 结束圆的半径 |
<script type="text/javascript">
var oCanvas = document.getElementById(‘canvas-1‘);
var context = oCanvas.getContext(‘2d‘);//指向2d渲染环境的引用
context.font = "30px Arial";
var gradient=context.createRadialGradient(200,200,10,200,200,100);
gradient.addColorStop("0","red");
gradient.addColorStop("1.0","white");
context.fillStyle = gradient;
context.fillRect(0,0,400,400)
</script>
原文：http://www.cnblogs.com/knightshibiao/p/3861130.html