绘制线性渐变
Canvas提供了用于创建线性渐变的函数createLinearGradient(x0,y0,x1,y1),坐标点(x0,y0)是起点 ,(x1,y1)是终点
创建一个渐变色
var gradient=createLinearGradient(0,0,300,0);
定义渐变色颜色
ctx.addColorStop(stop,color);
ctx.addColorStop(0,"#f00");
ctx.addColorStop(1,"#00f");
设置Canvas内容的fillStyle为当前的渐变对象,并且绘制这个图形
1 ctx.fillStyle=gradient; //设置fillStyle为当前的渐变对象
2 ctx.fillRect(0,0,400,300); //绘制渐变图形