在javascript中旋转六边形答案

【问题标题】：Rotate hexagon in javascript在javascript中旋转六边形
【发布时间】：2020-11-10 19:37:12
【问题描述】：

每个人。

我在https://github.com/AndrewListat/HexagonProgress 找到了这个很棒的 jquery 插件 bu Max Lawrence（我不知道为什么 Max 没有用于此的存储库）。它是麻省理工学院，我正在尝试旋转六边形，以便在顶部显示一个点。

这是它的生成方式：

这就是我需要的？

它生成一个画布，里面可以有一个图像。我打算用它作为头像来展示他们周围的游戏化进度。

你们能帮我解决这个问题吗？

将来，我计划将其转换为 vanilla-js（也是开源的），但现在，我无法理解六边形渲染背后的数学原理。

提前致谢。

【问题讨论】：

有一个名为starting angle 的属性设置为等于“Math.PI”，它可能控制六边形的方向。如果是这样，我敢打赌，用“Math.PI / 2”和“Math.PI / 3”之类的设置进行几分钟的实验可以从中找出秘密。
startAngle 属性只旋转进度条，不旋转整个六边形。

标签： javascript jquery math html5-canvas

【解决方案1】：

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

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

JS：

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

CSS：

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

请看这里的 js fiddle：https://jsfiddle.net/p6hc49b0/

【讨论】：

css 方法有效，但前提是您不使用插件的背景属性。它也会旋转图像。