在canvas里面，除了使用纯色，我们还能把填充和笔触样式设置为渐变色：线性渐变和径向渐变。
线性渐变 createLinearGradient(x0,y0,x1,y1) 返回 CanvasGradient
四个参数分别是渐变色起始坐标x，起始坐标y，结束坐标x，结束坐标y。
渐变色沿着两点之间的一条线来进行渐变。
径向渐变 createRadialGradient(x0,y0,r0,x1,y1,r1) 返回CanvasGradient
六个参数分别是
起点圆心坐标（x0,y0）
起点圆心半径（r0）
终点圆心坐标（x1,y1）
终点圆心?半径（r1）
这两种渐变方法都会返回一个 CanvasGradient对象，这个对象定义了addColorStop(position,color)的方法。
addColorStop() 给渐变的梯度线添加一种纯色， 返回?void。
举例
1 var ctx = document.querySelector(‘canvas‘).getContext(‘2d‘); 2 3 var grad = ctx.??createLinearGradient(0,0,500,500); 4 5 grad.addColorStop(0,‘green‘); 6 7 grad.addColorStop(0.5,‘yellow‘); 8 9 grad.addColorStop(1,‘blue‘);
注意，此时在画布上已经创建了一个矩形渐变范围，坐标是 0,0,500,500;
但并没有显示出来，此时需要我们再绘出一个别的形状--以?矩形为例。
来选择我们要显示的渐变范围，这个重新绘出的矩形需要取grad的样式。
1 ctx.fillStyle = grad; 2 ctx.fillRect(x,y,w,h);
此时，也就是说我们接下来要画的矩形，使用了我们刚才创建的渐变色。
不难想象，我们预先配置好的渐变范围其实就是一个长宽各500的矩形，渐变方向
是从左上角到右下角。
但是，我们要把这个新绘制矩形的放在哪呢？
我们可以把我们配置好的500*500的渐变范围当一块地，上面被土掩盖了，下面?是各种果实。你想看哪块的果实，你就把这个新矩形画在哪里。
你可以也画一个0，0，500，500的矩形，直接把整块地翻起来。?
你也可以画一个0，0，50，50的?矩形，只能看到左上角的绿色green，因为他渐变到yellow,或许是从50之后才开始的。
你也可以画一个450，450，50，50的矩形，那么你看到的将是右下角的blue。?