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中右下為正，所以五角星其實上下反了