用代码绘制一些有着固定边框的图形在网页上还是比较简单的,这里我们就来学学,如何让这些图形的边框产生一种渐变的效果,从而让图形更具观赏性。
工具/原料
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
用简单的办法绘制一个可以填充颜色的矩形。
上一篇:canvas线条如何按轨迹运动
下一篇:12306自动查询中断