Canvas 快速绘制五角星|人间不值得

前面《好玩的Canvas：直线（线段）、图形的绘制》一文讲述了Canvas绘制直线和矩形，本文将讲述如何绘制五角星，首先在纸上计算推导五角星五个坐标点：
canvas绘制五角星推导
然后我们可以看到五个角坐标规律，下面开始绘制：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Canvas绘制五角星</title>
    </head>
    <body>
        <canvas id="canvas" width="800" height="800"></canvas>
    </body>
    <script type="text/javascript">
        function get_dom(id){
            return document.getElementById(id);
        }

        //canavs绘制五角星
        //中心点坐标(x0,y0)
        //m,h五角星中心点到凸角和凹角的长度，使m大小接近于2*h
        function create_5(cxt,x0,y0,m,h){
            var a = 18;
            var b = 54;
            cxt.beginPath();
            for(i=0;i<5;i++){
                cxt.lineTo( m*Math.cos((a+i*72)*Math.PI/180)+x0, m*Math.sin((a+i*72)*Math.PI/180)+y0 );
                cxt.lineTo( h*Math.cos((b+i*72)*Math.PI/180)+x0, h*Math.sin((b+i*72)*Math.PI/180)+y0 );
            }
            cxt.closePath();
            cxt.stroke();
        }

        var canvas = get_dom("canvas");
        var cxt = canvas.getContext("2d");
        create_5(cxt,100,100,100,50);

    </script>
</html>

效果如下：