可以先使用createRadialGradient()来创建一个放射状/圆形渐变对象；然后使用addColorStop()方法定义渐变颜色；最后使用fillStyle属性填充渐变颜色，使用fillRect()等方法来绘制“已填色”的形状。
可以先使用HTML Canvas的径向渐变的函数createRadialGradient()来创建一个放射状/圆形渐变对象；然后使用addColorStop()方法定义渐变颜色；最后使用fillStyle属性填充渐变颜色，使用fillRect()等方法来绘制“已填色”的形状，如矩形，圆形，线条，文本等。
实现径向渐变效果所要的方法有：
createLinearGradient()方法创建放射状/圆形渐变对象；渐变可用于填充矩形、圆形、线条、文本等等。
JavaScript 语法：context.createRadialGradient(x0,y0,r0,x1,y1,r1);
参数值：
●x0：定义渐变的开始圆的 x 坐标
●y0：定义渐变的开始圆的 y 坐标
●r0：定义开始圆的半径
●x1：定义渐变的结束圆的 x 坐标
●y1：定义渐变的结束圆的 y 坐标
●r1：定义结束圆的半径
addColorStop()方法规定渐变对象中的颜色和位置。可以使用addColorStop()方法规定不同的颜色，以及在渐变对象中的何处定位颜色。
fillStyle属性设置或返回用于填充绘画的颜色、渐变或模式。
fillRect()方法绘制“已填色”的矩形。默认的填充颜色是黑色。
示例1：
var c = document.getElementById('myCanvas');
var ctx = c.getContext('2d');
//创建一个径向渐变对象
var radgrad = ctx.createRadialGradient(100,100,20,100,100,50);
//定义渐变色颜色
radgrad.addColorStop(0, 'red');
radgrad.addColorStop(0.3, 'yellow');
radgrad.addColorStop(1, 'blue');
ctx.fillStyle = radgrad; //设置用于填充绘画的颜色、渐变或模式
ctx.fillRect(50,50,150,150);//绘制渐变图形
效果图：
示例2：绘制具有径向渐变的球
线性渐变效果
var canvas= document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
function circle(x, y, r, c) {
ctx.beginPath();
var rad = ctx.createRadialGradient(x, y, 1, x, y, r);
rad.addColorStop(0, 'rgba('+c+',1)');
rad.addColorStop(1, 'rgba('+c+',0)');
ctx.fillStyle = rad;
ctx.arc(x, y, r, 0, Math.PI*2, false);
ctx.fill();
}
circle(128, 128, 200, '255,0,0');
circle(64, 64, 30,'0,255,0');
效果图：
示例3：使用渐变色绘制环
var canvas= document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var radgrad = ctx.createRadialGradient(60, 60, 0, 60, 60, 60);
radgrad.addColorStop(0.8, 'rgba(255,0,0,0)');
radgrad.addColorStop(0.85,'rgba(255,0,0,.6)');
radgrad.addColorStop(0.9, 'rgba(255,0,0,1)');
radgrad.addColorStop(0.95,'rgba(255,0,0,.6)');
radgrad.addColorStop(1, 'rgba(255,0,0,0)');
ctx.fillStyle = radgrad;
ctx.arc(60, 60, 60, 0, 2 * Math.PI, true);
ctx.fill();
效果图：
