Canvas 五角星绘制

效果图：
知识点：
1、五角星顶点坐标 (r*cos(deg)+x,-r*sin(deg)+y)
2、画圆 ctx.arc(x,y,r,0,2*Math.PI); //后两个参数开始弧度，结束弧度。0表示开始弧度为3点钟方向，0.5PI为90度。
代码：
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            #canvas{
                border:1px solid #ccc;
            }
            span{
                position: absolute;
                top:160px;
                left: 300px;
                font-size: 16px;
                color: #333;
            }
            span:first-of-type{
                top:170px;
                left: 220px;
                font-size: 12px;
                color: red;
            }
            span:last-of-type{
                top:186px;
                left: 242px;
                font-size: 12px;
                color: green;
            }
            p{
                position: absolute;
                top:15px;
                left: 15px;
                font-size: 18px;
                color: blue;
            }
            p:first-of-type{
                top:10px;
                left: 375px;
            }
            p:last-of-type{
                top:370px;
                left: 15px;
            }
        </style>
    </head>
    <body>
        <canvas id="canvas">您的浏览器不支持</canvas>
        <span>54deg</span>
        <span>(r*cos(18deg)+x,-r*sin(18deg)+y)</span>
        <span>18deg</span>
        <p>x</p>
        <p>坐标原点(0,0)</p>
        <p>y</p>
    </body>
    <script>
        var canvas=document.getElementById("canvas");
        canvas.width=400;
        canvas.height=400;
        var ctx=canvas.getContext("2d");
        
        //画五角星
        ctx.beginPath();
        for(var i=0;i<5;i++){
            ctx.lineTo(Math.cos((18+i*72)/180*Math.PI)*100+200,
                      -Math.sin((18+i*72)/180*Math.PI)*100+200);
            ctx.lineTo(Math.cos((54+i*72)/180*Math.PI)*50+200,
                      -Math.sin((54+i*72)/180*Math.PI)*50+200);
        }
        ctx.closePath();
        ctx.strokeStyle="#333";
        ctx.stroke();
        
        //画大圆
        ctx.beginPath();
        ctx.arc(200,200,100,0,2*Math.PI);
        ctx.strokeStyle="#ccc";
        ctx.stroke();
        
        //画小圆
        ctx.beginPath();
        ctx.arc(200,200,50,0,2*Math.PI);
        ctx.strokeStyle="#ccc";
        ctx.stroke();
        
        //画对折辅助线
        ctx.beginPath();
        ctx.moveTo(200,0);
        ctx.lineTo(200,400);
        ctx.strokeStyle="#ccc";
        ctx.stroke();
        
        ctx.beginPath();
        ctx.moveTo(0,200);
        ctx.lineTo(400,200);
        ctx.strokeStyle="#ccc";
        ctx.stroke();
        
        //圆心到18度顶角的连线
        ctx.beginPath();
        ctx.moveTo(200,200);
        ctx.lineTo(Math.cos(18/180*Math.PI)*100+200,
                  -Math.sin(18/180*Math.PI)*100+200);
        ctx.strokeStyle="green";
        ctx.stroke();
        
        //标出角度1
        ctx.beginPath();
        ctx.arc(200,200,35,-(18/180)*Math.PI,0);
        ctx.strokeStyle="green";
        ctx.stroke();
        
        //圆心到54度顶角的连线
        ctx.beginPath();
        ctx.moveTo(200,200);
        ctx.lineTo(Math.cos(54/180*Math.PI)*50+200,
                  -Math.sin(54/180*Math.PI)*50+200);
        ctx.strokeStyle="red";
        ctx.stroke();
        
        //标出角度2
        ctx.beginPath();
        ctx.arc(200,200,20,-(54/180)*Math.PI,0);
        ctx.strokeStyle="red";
        ctx.stroke();
        
        drawArrow(ctx, 5, 5, 380,5,30,5,5,'#333');//向右的箭头
        drawArrow(ctx, 5, 2, 5,380,30,5,5,'#333');//向下的箭头
        //封装箭头函数
        function drawArrow(ctx, fromX, fromY, toX, toY,theta,headlen,width,color) {
            theta = typeof(theta) != 'undefined' ? theta : 30;
            headlen = typeof(theta) != 'undefined' ? headlen : 10;
            width = typeof(width) != 'undefined' ? width : 1;
            color = typeof(color) != 'color' ? color : '#000';
         
            // 计算各角度和对应的P2,P3坐标
            var angle = Math.atan2(fromY - toY, fromX - toX) * 180 / Math.PI,
                angle1 = (angle + theta) * Math.PI / 180,
                angle2 = (angle - theta) * Math.PI / 180,
                topX = headlen * Math.cos(angle1),
                topY = headlen * Math.sin(angle1),
                botX = headlen * Math.cos(angle2),
                botY = headlen * Math.sin(angle2);
         
            ctx.save();
            ctx.beginPath();
         
            var arrowX = fromX - topX,
                arrowY = fromY - topY;
         
            ctx.moveTo(arrowX, arrowY);
            ctx.moveTo(fromX, fromY);
            ctx.lineTo(toX, toY);
            arrowX = toX + topX;
            arrowY = toY + topY;
            ctx.moveTo(arrowX, arrowY);
            ctx.lineTo(toX, toY);
            arrowX = toX + botX;
            arrowY = toY + botY;
            ctx.lineTo(arrowX, arrowY);
            ctx.strokeStyle = color;
            ctx.lineWidth = width;
            ctx.stroke();
            ctx.restore();
        }
    </script>
</html>