在网页上用代码绘制有阴影的多边形

1、思路。从我们的目标来看，在用代码实现这样的一个过程需要三个部分，第一个部分就是对于阴影设置一个模糊滤镜的效果，第二个部分就是阴影的样式，第三个部分就是多边形的样式。

2、模糊皱诣愚继样式。我们使用了一个高斯模糊为3的滤镜。<defs><filter id="filter" x="0" y="0"> <feGaussianBlur stdDeviation="3"/> <feOffset dx="8" dy="8"/></filter></defs>

3、阴影样式。这个阴影要与多边形一样的大小，颜色的选择也是以灰度为主。<rect width="150" height="100" fill="grey" filter="url(#filter)"/>

4、多边形的样式，我们这里使用了常见的矩形，并进行了一个绘制与填充。<rect width="150" height="100" fill="orange" stroke="red" />

5、一稍僚敉视个特别的深红色的效果。<svg width="100%" height="100%" version="1.1"&爿讥旌护gt;<defs><filter id="filter" x="0" y="0"> <feGaussianBlur stdDeviation="3"/> <feOffset dx="8" dy="8"/></filter></defs><rect width="150" height="100" fill="grey" filter="url(#filter)"/><rect width="150" height="100" fill="#8B2323" stroke="red" /></svg>

6、小技巧，绘制一条贝塞尔曲线的JAVA代码实现方法。<script>var c=document.getElementById("贝塞尔曲线");var ctx=c.getContext("2d");ctx.beginPath();ctx.moveTo(30,30);ctx.quadraticCurveTo(40,120,220,30);ctx.stroke();</script>