1.线性渐变

var grd = ctx.createLinearGradient(x0,y0,x1,y1);
//x0,y0:起始坐标;x1,y1:结束坐标
grd.addColorStop(0,"black");
grd.addColorStop(1,"white");
//添加一个渐变颜色，第一个参数表示渐变中开始与结束之间的位置。取值范围为0.0~1.0，第二个为颜色

• 线性渐变是一个对象。

• 一般用图片代替

2.径向渐变

var rlg = ctx.createRadialGradient(x0,y0,r0,x1,y1,r1);
x0,y0,r0:起始坐标及起始半径
x1,y1,r1:结束坐标及结束半径

3.绘制背景图

ctx.createPattern(img,repeat);
//在指定的方向内重复指定的元素
//repeat(默认)：在水平和垂直方向重复；
//repeat-x:只在水平方向重复；
//repeat-y:只在垂直方向重复；
//no-repeat:只显示一次。