<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d"); // 创建渐变

var grd=ctx.createLinearGradient(0,0,200,0);

grd.addColorStop(0,"red");

grd.addColorStop(0.5,"green");

grd.addColorStop(1,"white"); // 填充渐变

ctx.fillStyle=grd;

ctx.fillRect(10,10,150,80);