createLinearGradient() 创建线性渐变，用在画布内容上
createLinearGradient()
var c = document.getElementById('mycanvas');
var ctx = c.getContext('2d');
var grd = ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"yellow");
grd.addColorStop(1,"green");
ctx.fillStyle = grd;
ctx.fillRect(20,20,150,100);
createPattern(image,"repeat|repeat-x|repeat-y|no-repeat") 在指定方向上重复指定的元素
createPattern()
<canvas id="mycanvas2" width="300" height="200"></canvas>
var c2=document.getElementById("mycanvas2");
var ctx2=c2.getContext("2d");
var img=document.getElementById("lamp");
img.onload = function(){
var pat=ctx2.createPattern(img,'repeat');
ctx2.rect(10,10,150,100);
ctx2.fillStyle=pat;
ctx2.fill();
}
createRadialGradient()创建放射状/环形的渐变，用在画布内容上
createRadialGradient()
var c3 = document.getElementById('mycanvas3');
var ctx3 = c3.getContext('2d');
//context.createRadialGradient(x0,y0,r0,x1,y1,r1);
/* x0 渐变的开始圆的 x 坐标
y0 渐变的开始圆的 y 坐标
r0 开始圆的半径
x1 渐变的结束圆的 x 坐标
y1 渐变的结束圆的 y 坐标
r1 结束圆的半径*/
var grd3 = ctx3.createRadialGradient(85,60,5,90,80,120);
grd3.addColorStop(0,"red");
grd3.addColorStop(1,"white");
ctx3.fillStyle=grd3;
ctx3.fillRect(10,10,170,120);
addColorStop() 规定渐变对象中的颜色和停止位置
addColorStop()
var c4 = document.getElementById('mycanvas4');
var ctx4 = c4.getContext('2d');
var grd4 = ctx4.createLinearGradient(0,0,170,0);
//gradient.addColorStop(stop,color);
//stop 介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。
//color 在结束位置显示的 CSS 颜色值
grd4.addColorStop(0,"red");
grd4.addColorStop(1,"white");
ctx4.fillStyle = grd4;
ctx4.fillRect(10,10,180,100)