canvas画渐变线条实在太容易，先定义好渐变填充之后，再应用到canvas，最后再利用canvas划线，问题就解决了。下面我们看实例。
一、HTML控件
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>
二、JS代码
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//定义渐变
var gradient=ctx.createLinearGradient(0,0,100,0);
gradient.addColorStop("1","green");
gradient.addColorStop("0.2","blue");
gradient.addColorStop("0.2","red");
//应用渐变
ctx.strokeStyle=gradient;
//画线
ctx.lineWidth=5;
ctx.moveTo(10,75);
ctx.lineTo(280,75);
ctx.stroke();
最后，画出下面的渐变线。
