（效果图）

当我开始研究HTML5的时候，canvas在第一时间就吸引住我了。哇塞，这东西未来绝对能取代WINDOWS的画图（小畫家）工具的！

于是本着探索的精神，我重新捡回了中学时期的三角函数，准备画个五角星。

当我快要做完的时候，我可爱的表妹在微博上嘲笑我啥都不会。

这无疑刺激我小宇宙爆发，一口气就做出来了！下面是代码

JS：

            function can()
            {
                var a=document.getElementById('new_canvas');
                var b=a.getContext('2d');
                b.strokeStyle='#ccc';
                b.lineWidth=0.5;
                for (var i=0;i<48;i++)
                    {
                        for (var i2=0;i2<84;i2++)
                            {
                                b.strokeRect(i2*10, i*10, 10, 10);
                            }
                    }//做个网格，方便看看画得准不准
                b.beginPath();//开始画了
                b.lineWidth=1;
                b.moveTo(420,140);//基本点
                //偏移值计算开始
                var x1=200*Math.tan(degreeToRaidus(18));
                var y1=200;
                var l=200*Math.sin(degreeToRaidus(72));
                var x2=-200*Math.sin(degreeToRaidus(54));
                var y2=-200*Math.sin(degreeToRaidus(36));
                //偏移值计算结束
                b.lineTo(420+x1, 140+y1);//右下点
                b.lineTo(420+x1+x2, 140+y1+y2);//左上点
                b.lineTo(420+x1+x2+l, 140+y1+y2);//右上点
                b.lineTo(420-x1,140+y1); //右下点
                b.lineTo(420,140);//返回原点
                b.strokeStyle='black';//星星线条颜色
                b.stroke();//把星星画出来
            }
            function degreeToRaidus(degree)
            {
                return degree*Math.PI/180;
            }

HTML部分：

这里稍稍说明一下，can()是主绘图函数，负责绘制，绑定在BODY的ONLOAD上的.degreeToRaidus(）是用来转换角度为弧度的（js只认弧度）.

其实偏移值算了挺久的~~~~