html5 渐变色的方法

createLinearGradient(x,y,x1,y1) 线性的渐变色：x，y渐变开始的坐标  x1,x2渐变结束的坐标

create

Object createRadialGradient(x1, y1, r1, x2, y2, r2);

创建一个从以(x1, y1)点为圆心、r1为半径的圆到以(x2, y2)点为圆心、r2为半径的圆的径向渐变对象。

渐变对象创建完成之后必须使用它的addColorStop()方法来添加颜色，该方法的原型如下：

void addColorStop(position, color);

其中position表示添加颜色的位置，取值范围为[0, 1]，0表示起点，1表示终点；color表示添加的颜色，取值可以是任何CSS颜色值。

渐变对象创建并配置完成之后就可以将其赋予Context对象的strokeStyle属性或者fillStyle属性，然后绘制的图形就具有了所需的渐变效果。