渐变有线性渐变和径向渐变两种

线性渐变:###

create Linear Gradient (四个参数) 分别是:start横坐标 , start纵坐标 , end横坐标 , end纵坐标
例子:ctx.createLinearGradient(0,0,500,500);
如果画布是500*500大的,渐变是铺满整个画布的, 默认是斜着渐变的
如果,参数有更改
比如:ctx.createLinearGradient(100,100,400,400);
这的意思就是说,从100,100,这个位置开始的渐变,到400,400结束渐变;

径向渐变:###

create Radial Gradient(六个参数) 分别是 start横坐标 start纵坐标 start半径 end横坐标 end纵坐标 end半径
``var rg = ctx.createRadialGradient(100,250,150,350,250,50);
这是一个小孔成像样子的图形,如果第三个参数和第六个参数一样,那就是一个筒状的渐变
<我本来是要把图片贴上来,可是不会操作,再要学习一段时间就会了>

``var rg = ctx.createRadialGradient(150,250,25,250,250,150);
如果前两个参数也是250,250的话,就是个跟麻将里面1饼图案很相像的一个图像
但是改了坐标,就是一个很类似水滴有高亮的一个图案,

rg.addColorStop(0.5,"#90EE90");
rg.addColorStop(1,"rgba(0,0,255,0.1)");
ctx.fillStyle=rg;
ctx.fillRect(0,0,500,500);