html5 - canvas绘制五角形

Question

在网上看到的视频，不理解是怎样通过for循环和Math.PI / 5*4实现的五角形，大神帮忙解析下

function create5Star(context) {
            var n = 0;
            var dx = 100;
            var dy = 0;
            var s = 50;
            context.BeginPath;
            context.fillStyle = 'rgba(255,0,0,0.5)';
            var x = Math.sin(0);
            var y = Math.cos(0);
            var dig = Math.PI / 5*4;
            for (var i=0;i<5;i++) {
                var x = Math.sin(i*dig);
                var y = Math.cos(i*dig);
                context.lineTo(dx+x*s,dy+y*s);
            }
            context.closePath();
        }

Answer 1

2π/5 divides 5 points equally. Because the five-pointed star needs to connect one point to the next point, it is multiplied by 2. We get what you said (2π/5)*2 = π/5*4

Answer 2

I only know a little bit about cavans, but I am very curious about this question. Can you post the address of the video tutorial? I'll go take a look.

Answer 3

context.stroke();

You can see the trajectory

In fact, it is the coordinates of the five vertices you are looking for. Start from the bottom vertex and walk counterclockwise along the trajectory

s is the radius of the circumcircle from the vertex to the pentagram, plus simple sine and cosine knowledge.

However, because the lower right side of the canvas is upright, the five-pointed star is actually upside down