1、思路。绘制一个渐变的矩形可以分解成两个部分，一个就是矩形边框的渐变效果，另外一个就是绘制矩形这个主体任务。
2、我们烂瘀佐栾这里设计一种绿色的渐变效果，三种不同深度的绿色形成了这样的一个绿色调的渐变过程。var c=document.g髫潋啜缅etElementById("渐变矩形");var ctx=c.getContext("2d");var gradient=ctx.createLinearGradient(0,0,190,50);gradient.addColorStop("0","#66CDAA");gradient.addColorStop("0.5","#66CD00");gradient.addColorStop("1.0","#556B2F");
3、有了渐变这样的一个定义之后，我们再把它作用在图形上面就非常的简单了。ctx.strokeStyle=gradient;ctx.lineWidth=10;ctx.strokeRect(40,110,210,100);
4、我们还可以用同样的方法去做一个紫色边框的效果。
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>
6、用简单的办法绘制一个可以填充颜色的矩形。<script>var c=document.getElementById("矩形");var ctx=c.getContext("2d");ctx.fillRect(20,20,150,100);</script>
