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

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">

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