使用 HTML 5 画布绘制五边形

Posted 2023-03-05

【中文标题】使用 HTML 5 画布绘制五边形

【英文标题】：Draw a Pentagon with HTML 5 canvas

【发布时间】：2018-01-07 09:10:00

【问题描述】：

我需要用 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();