canvas绘制渐变

渐变是指填充时从一种颜色慢慢过渡到另外一种颜色。因为是渐变所以一般会至少使用两次addColorStop()来追加颜色。

1)  绘制线性渐变

var g1 = ctx.createLinearGradient(xStart,yStart,xEnd,yEnd);//创建一个渐变对象

g1.addColorStop(offset，color);//offset 是0-1之间的浮点值，颜色离开渐变起始点的偏移量。color为绘制时候使用的颜色。

g1.addColorStop(offset，color);

ctx.fillStyle = g1;

ctx.fillRect(0,0,400,300);

2)  绘制径向渐变

var g2 = ctx.createRadialGradient(xStart,yStart,raidusStart,xEnd,yEnd,raidusEnd);//创建一个渐变对象

g2.addColorStop(offset，color);//offset 是0-1之间的浮点值，颜色离开渐变起始点的偏移量。color为绘制时候使用的颜色。

g2.addColorStop(offset，color);

ctx.fillStyle = g2;

eg:

var g2 = ctx.createRadialGradient(200,180, 10,400, 380,100);

       g2.addColorStop(0.3,'rgba(0,240,210,.3)');

       g2.addColorStop(1,'rgba(0,0,210,.3)');

       ctx.beginPath();

       ctx.arc(400, 380,100,0, 360,false);

       ctx.closePath();

       ctx.fillStyle = g2;

ctx.fill();