时间戳

首页 > 解决方案 > 在javascript中旋转六边形

javascript - 在javascript中旋转六边形

问题描述

每个人。

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

它是这样生成的：

在此处输入图像描述

这就是我需要的吗？

在此处输入图像描述

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

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

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

提前致谢。

标签： javascriptjquerymathhtml5-canvas

解决方案

我只是尝试使用这些设置并添加了一些 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 小提琴：https ://jsfiddle.net/p6hc49b0/

推荐阅读