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

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

2、我们这里设计一种绿色的渐变效果，三种不同深度的绿色形成了这样的一个绿色调的渐变过程。

var c=document.getElementById("渐变矩形");

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 gradient

var gradient=ctx.createLinearGradient(0,0,190,50);

gradient.addColorStop("0","#6959CD");

gradient.addColorStop("0.5","#68228B");

gradient.addColorStop("1.0","#191970");

// Fill with gradient

ctx.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>