多语言展示
当前在线:1158今日阅读:112今日分享:19

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

用代码绘制一些有着固定边框的图形在网页上还是比较简单的,这里我们就来学学,如何让这些图形的边框产生一种渐变的效果,从而让图形更具观赏性。
工具/原料

dreamweaver

方法/步骤
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

我们还可以用同样的方法去做一个紫色边框的效果。

6

用简单的办法绘制一个可以填充颜色的矩形。

推荐信息