canvas实现五角星

用变量的方式绘制一个五角星，首先求五角星十个顶点的坐标。

可以把每个五角星看成外顶点用一个大圆绘制，内顶点用小圆绘制。在坐标系（0deg）下，根据每个顶点的角度和圆的半径求得x,y。

 

而每个大顶点相差72deg(180/5),每个小顶点也差72deg.所以下一个顶点的度数就是当前点加上72deg.(逆时针)

 代码实现

　drawStar(context, 300, 150, 400, 400);

function drawStar(context, R, r, x, y) {
            context.beginPath();
            for (var i = 0; i < 5; i++) {
                context.lineTo(x + Math.cos((18 + 72 * i) / 180 * Math.PI) * R,
                               y - Math.sin((18 + 72 * i ) / 180* Math.PI)* R);
                context.lineTo(x + Math.cos((54 + 72 * i) / 180 * Math.PI)  * r,
                               y - Math.sin((54 + 72 * i) / 180 * Math.PI) * r);
            }
            context.closePath();
            context.stroke();
        }