在网页上用代码绘制一个渐变边框的图形技巧

1、思路。绘制一个渐变的矩形可以分解成两个部分，一个就是矩形边框的渐变效果，另外一个就是绘制矩形这个主体任务。

3、有了渐变这样的一个定义之后，我们再把它作用在图形上面就非常的简单了。ctx.strokeStyle=gradient;ctx.lineWidth=10;ctx.strokeRect(40,110,210,100);

5、用同样的办法，我们还可以用这个渐变的样式使用在文字上面。strokeText（）这个代码可以达成这样的一个功能。<script type="text/javascript">var c=document.getElementById("写字也行");var ctx=c.getContext("2d");ctx.font="60px bold";// Create gradientvar gradient=ctx.createLinearGradient(0,0,190,50);gradient.addColorStop("0","#6959CD");gradient.addColorStop("0.5","#68228B");gradient.addColorStop("1.0","#191970");// Fill with gradientctx.strokeStyle=gradient;ctx.strokeText("我在百度经验",20,80);</script>