canvas绘制之渐变色

一渐变色分为线性渐变和放射渐变

2d绘制环境通过调用

线性渐变：createLineGradient(x,y,width,height),

放射渐变：createRadialGradient(x0,y0,r0,x1,y1,r2) x0，y0是起始点坐标r0是半径范围

二：代码示例：

/**
 * Created by Administrator on 2015/5/2.
 */
var canvas = document.getElementById('canvas3');
context = canvas.getContext('2d');
//线性渐变
gradient = context.createLinearGradient(0,0,canvas.width/2,0);
gradient.addColorStop(0,'blue');
gradient.addColorStop(0.25,'white');
gradient.addColorStop(0.5,'purple');
gradient.addColorStop(0.75,'red');
gradient.addColorStop(1,'yellow');
context.fillStyle = gradient;
context.rect(0,0,canvas.width/3,canvas.height/3);
context.fill();
//放射性渐变
gradient2 = context.createRadialGradient(canvas.width/2,0,10,canvas.width/4,canvas.height,100);
gradient2.addColorStop(0,'blue');
gradient2.addColorStop(0.25,'white');
gradient2.addColorStop(0.5,'purple');
gradient2.addColorStop(0.75,'red');
gradient2.addColorStop(1,'yellow');
context.fillStyle = gradient2;
context.rect(0,0,canvas.width,canvas.height);
context.fill();

结果如图：