通过创建一个gradient对象，在绘制图形前赋值于上下文（context）中，从而达到颜色渐变效果，渐变效果可用于填充矩形、圆形、线条、文本等等。

HTML5 Canvas 中的渐变分为线性渐变和径向渐变（也被称之为扩散性渐变）。相关方法：

// 创建线性渐变
// x0:渐变开始点的 x 坐标
// y0:渐变开始点的 y 坐标
// x1:渐变结束点的 x 坐标
// y1:渐变结束点的 y 坐标
context.createLinearGradient(x0,y0,x1,y1);

// 创建径向渐变
// 渐变的开始圆的 x 坐标
// 渐变的开始圆的 y 坐标
// 开始圆的半径
// 渐变的结束圆的 x 坐标
// 渐变的结束圆的 y 坐标
// 结束圆的半径
context.createRadialGradient(x0,y0,r0,x1,y1,r1);

// 增加规定渐变对象中的颜色和停止位置
// stop:介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。
// color:在结束位置显示的 css 颜色值
gradient.addColorStop(stop, color);

createLinearGradient 和 createRadialGradient 创建出的 gradient 对象必须使用 addColorStop() 方法规定不同的颜色，以及在 gradient 对象中的何处定位颜色。

线性渐变

var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");

var gradient=ctx.createLinearGradient(0,0,170,0);
gradient.addColorStop(0,"black");
gradient.addColorStop("0.7","yellow");
gradient.addColorStop(1,"red");

ctx.fillStyle=gradient;
ctx.fillRect(20,20,160,100);

径向渐变

var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");

var gradient=ctx.createRadialGradient(100,100,5,100,100,100);
gradient.addColorStop(0,"black");
gradient.addColorStop("0.7","yellow");
gradient.addColorStop(1,"red");

ctx.fillStyle=gradient;
ctx.fillRect(20,20,160,160);

文字颜色渐变示例

var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");

var gradient=ctx.createLinearGradient(0,0,170,0);
gradient.addColorStop(0,"black");
gradient.addColorStop("0.7","yellow");
gradient.addColorStop(1,"red");

ctx.font="30px Verdana";
ctx.fillStyle=gradient;
ctx.fillText("Hello World!",10,70);

ctx.font="30px Verdana";
ctx.strokeStyle=gradient;
ctx.strokeText("Hello World!",10,120);