canvas to achieve five-pointed star

A variable manner to draw a five-pointed star, five-pointed star ten first seeking the coordinates of the vertices.

Each can be five-pointed star with a large circle as the outer vertex drawn, the small circle drawn with the vertex. In the coordinate system (0deg), in accordance with each vertex of the angle and the circle radius determined x, y.

 

 

And each vertex of the big difference of 72deg (180/5), each minor vertex inferior 72deg. So the degree of the next vertex is the current point plus 72deg. (Counterclockwise)

 

 

 

 

 

 

 Code

　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();
        }