使用 HTML 5 画布绘制五边形答案

【问题标题】：Draw a Pentagon with HTML 5 canvas使用 HTML 5 画布绘制五边形
【发布时间】：2023-03-21 23:38:01
【问题描述】：

我需要用 Javascript 中的 html 5 画布绘制五角大楼。这里没有太多可写的了。我已经尝试查找它，但是很多示例都无法正常工作。

【问题讨论】：

How to draw polygons on an HTML5 canvas? 的可能重复项。五边形就像任何其他多边形一样。您可以使用 javascript 来计算坐标的数学。
我知道五边形就像任何其他多边形一样，我在数学，特别是几何方面有问题。
那么您应该尝试在Math StackExchange 中提问，因为您已澄清您没有编程问题。
另外，我为你做了一些谷歌搜索。我发现这个blog article 的答案被撕掉了。玩得开心。
五边形是“正多边形”的一种。文档中的这篇文章展示了如何绘制 regular polygons。

【解决方案1】：

五边形从 3 点钟位置开始，使用旋转来更改以弧度为单位的起始位置。即从顶部开始旋转是-90deg = -Math.PI / 2

function pentagon(x, y, radius, rotation){
    for(var i = 0; i < 5; i ++){
        const ang = (i / 5) * Math.PI * 2 + rotation;
        ctx.lineTo(
            Math.cos(ang) * radius + x,
            Math.sin(ang) * radius + y
        );
     }
     ctx.closePath();
}

ctx.beginPath();
pentagon(100,100,50,-Math.PI / 2);
ctx.fill();
ctx.stroke();

【讨论】：