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平分5个点，因为五角星需要隔一个点连下一个点，所以再乘以2。就得到了你说的 (2π/5)*2 = π/5*4

Answer 2

我只会一点cavans，不过我很好奇这个问题，你能贴出来视频教程的地址吗？我去看看。

Answer 3

context.stroke();

就可以看到轨迹了

其实就是找的五个顶点坐标，从最下面一个顶点开始沿轨迹逆时针走

s是顶点到五角星外接圆半径，加上简单的正余弦知识就可以了

不过因为canvas中右下为正，所以五角星其实上下反了