绘制线性渐变要用到：createLinearGradient，方法如：XXX.createLinearGradient(xStart,yStart,xEnd,yEnd);
xStart为渐变起始地点的横坐标，yStart为渐变起始地点的纵坐标，xEnd为渐变结束地点的横坐标，yEnd为渐变起始地点的纵坐标。
绘制完坐标后用addColorStop来设定渐变的颜色，方法如：XXX.addColorStop(offset,color);
offset为所设定颜色离开渐变起点的偏移量，在0-1之间。color为绘制的颜色。
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <head> 4 </head> 5 6 <body> 7 <canvas id="jianbian" width="1000" height="1000"></canvas> 8 <script type="text/javascript"> 9 var c=document.getElementById("jianbian"); 10 var cxt=c.getContext("2d"); 11 var grd=cxt.createLinearGradient(0,0,1000,1000); 12 grd.addColorStop(0,"#FF0000"); 13 grd.addColorStop(1,"#00FF00"); 14 cxt.fillStyle=grd; 15 cxt.fillRect(0,0,1000,1000); 16 </script> 17 </body> 18 </html>