如果不想使用以上的方法去生成渐变颜色，可以使用如下的canvas提供的几个方法去简便实现渐变效果：
▲
addColorStop(offset, color) –addColorStop 方法接受 2 个参数，offset参数必须是一个 0.0 与 1.0 之间的数值，表示渐变中颜色所在的相对位置。例如，0.5 表示颜色会出现在正中间。color 参数必须是一个有效的 CSS 颜色值
createLinearGradient(x0, y0, x1, y1) –该方法接受 4 个参数，表示渐变的起点 (x1,y1) 与终点 (x2,y2)。
createRadialGradient(x0, y0, r0, x1, y1, r1) – 该方法接受 6 个参数，前三个定义一个以 (x1,y1) 为原点，半径为 r1 的圆，后三个参数则定义另一个以 (x2,y2) 为原点，半径为 r2 的圆。
下面的代码演示了使用渐变的效果：
var gradient = context.createLinearGradient(0, 0,0, 145);
gradient.addColorStop(0, “#00ABEB”);
gradient.addColorStop(0.5, “yellow”);
gradient.addColorStop(0.8, “green”);
gradient.addColorStop(1, “white”);
context.fillStyle = gradient;
context.fillRect(5, 5, 145, 145);
gradient.addColorStop(0, “#00ABEB”);
gradient.addColorStop(0.5, “yellow”);
gradient.addColorStop(0.8, “green”);
gradient.addColorStop(1, “white”);
context.fillStyle = gradient;
context.fillRect(5, 5, 145, 145);
实现的效果如下图：
▲
