canvas绘制五角星

canvas绘制五角星，其大致思路就是：

里面的五个点和外面的五个点为同一圆心，以该点为圆心，利用数学几何知识可知每个点角度，利用Math.cos()和Math.sin()可算出每个店的坐标，最后用lineTo把每个点连起来即成为了一个五角星

    function drawStar(context,r,R,x,y) {
　　//context：canvas画柄，r：小圆半径，R：大圆半径，x：圆心x左边，y：圆心y坐标
        context.beginPath();
        for (var i = 0; i < 5; i++) {
            context.lineTo(Math.cos((18 + i * 72 ) / 180 * Math.PI) * R + x, -Math.sin((18 + i * 72 ) / 180 * Math.PI) * R + y);
            context.lineTo(Math.cos((54 + i * 72 ) / 180 * Math.PI) * r + x, -Math.sin((54 + i * 72 ) / 180 * Math.PI) * r + y);
        context.closePath();
        context.fillStyle = '#fb3';
        context.strokeStyle = "#fd5";
        context.fill();
        context.stroke();
    }

这样，就能够10个点连接起来，组成了一个五角星。