javascript中的旋转六边形

各位

我在bu Max Lawrence找到了这个很棒的jquery插件（我不知道为什么Max没有这个存储库）。这是麻省理工学院，我正在尝试旋转六边形，这样它就可以在顶部显示一个点

这就是它如何生成：

这就是我需要它的方式

它生成一个画布，里面可以有一个图像。我计划用它作为化身，展示他们周围的游戏化进程

你们能帮我吗

在未来，我计划将其转换为vanilla js（开源），但现在，我无法理解hexagon渲染的数学原理

---

提前感谢。

我只是尝试使用设置并添加了一些CSS来旋转画布

添加了一个起始角度0来设置线条的起始点，并添加了CSS来将画布旋转90度

JS:

CSS:

---

请看这里的js fiddle：

有一个名为

起始角度

的属性，它被设置为“

Math.PI

”，可以控制六边形的方向。如果是的话，我打赌几分钟对设置的实验，如“

Math.PI/2

”和“

Math.PI/3

”会从中获得秘密。startAngle属性只会旋转进度条，而不是整个六边形。css方法可以工作，但只有在不使用插件的后台属性的情况下。它也会旋转图像。

$('#hexagon').hexagonProgress({
       value:0.54,
        startAngle: 0,
        animation:true,
        lineWidth: 5,
        lineCap: "round",
        clip: true
    });

#hexagon canvas{
  transform: rotate(90deg);
}