Javascript 沿六边形的轨迹移动对象

正如您在附加的GIF中所看到的，白点以圆形路径移动

如何使它沿着六边形的轨迹移动。换句话说，使点沿着六边形路径

我使用以下代码旋转白点：

const angle=Math.PI/6*delta；//delta是角度增量的当前时间。
常数半径=300；
常数x=中心x+数学cos（角度）*半径；
常数y=中心y+数学正弦（角度）*半径；

---

谢谢

有多种方法可以做到这一点。如果希望围绕六边形中心保持恒定的角旋转速度，则可以根据旋转角度修改移动对象的半径

首先选择六边形顶点对应的半径。在这个例子中，我使用的半径是90px。内半径（与六边形侧面相切的内接圆）是该值的sqrt（0.75）倍：

    r_outer = 90.0
    r_inner = r_outer * Math.sqrt(0.75)

如果零角对应于六边形一侧的中间，则通过简单的几何图形，沿着这一侧的半径将等于

r_inner/Math.cos（θ）

−30°至+30°。可以使用浮点模数运算符将角度限制在0到60°的范围内。为使半径计算的角度保持在±30°范围内，只需在计算模量之前将角度加上30°，然后再减去

因此，完整的计算如下所示：

    r0 = 90.0              (Outer radius)
    r1 = r0 * sqrt(0.75)   (Inner radius)
    d30 = 30 * pi/180      (30 degrees in radians)
    d60 = 60 * pi/180      (60 degrees in radians)
    r = r1 / cos((theta + d30) % d60 - d30)
    x = x_center + sin(theta) * r
    y = y_center - cos(theta) * r

下面是一个工作示例：

设θ=0.0；
设r0=90.0；//外半径
设r1=r0*Math.sqrt（0.75）；//内半径
设d30=30*Math.PI/180；//弧度为30度
设d60=60*Math.PI/180；//弧度为60度
函数move_dot（）{
θ+=0.025；
设r=r1/Math.cos（（θ+d30）%d60-d30）；
设x=Math.sin（θ）*r；
设y=-Math.cos（θ）*r；
document.getElementById（'dot'）.style.cx=x.toFixed（2）+'px'；
document.getElementById（'dot'）.style.cy=y.toFixed（2）+'px'；
}
document.body.onload=function（）{setInterval（move_dot，30）；}

#hex{填充：无；笔划：#aaf；笔划宽度：1；}
#点{fill:#000；笔划：无；cx:90px；cy:0px；}

---

有多种方法可以做到这一点。如果希望围绕六边形中心保持恒定的角旋转速度，则可以根据旋转角度修改移动对象的半径

首先选择六边形顶点对应的半径。在这个例子中，我使用的半径是90px。内半径（与六边形侧面相切的内接圆）是该值的sqrt（0.75）倍：

    r_outer = 90.0
    r_inner = r_outer * Math.sqrt(0.75)

如果零角对应于六边形一侧的中间，则通过简单的几何图形，沿着这一侧的半径将等于

r_inner/Math.cos（θ）

−30°至+30°。可以使用浮点模数运算符将角度限制在0到60°的范围内。为使半径计算的角度保持在±30°范围内，只需在计算模量之前将角度加上30°，然后再减去

因此，完整的计算如下所示：

    r0 = 90.0              (Outer radius)
    r1 = r0 * sqrt(0.75)   (Inner radius)
    d30 = 30 * pi/180      (30 degrees in radians)
    d60 = 60 * pi/180      (60 degrees in radians)
    r = r1 / cos((theta + d30) % d60 - d30)
    x = x_center + sin(theta) * r
    y = y_center - cos(theta) * r

下面是一个工作示例：

设θ=0.0；
设r0=90.0；//外半径
设r1=r0*Math.sqrt（0.75）；//内半径
设d30=30*Math.PI/180；//弧度为30度
设d60=60*Math.PI/180；//弧度为60度
函数move_dot（）{
θ+=0.025；
设r=r1/Math.cos（（θ+d30）%d60-d30）；
设x=Math.sin（θ）*r；
设y=-Math.cos（θ）*r；
document.getElementById（'dot'）.style.cx=x.toFixed（2）+'px'；
document.getElementById（'dot'）.style.cy=y.toFixed（2）+'px'；
}
document.body.onload=function（）{setInterval（move_dot，30）；}

#hex{填充：无；笔划：#aaf；笔划宽度：1；}
#点{fill:#000；笔划：无；cx:90px；cy:0px；}

白点是什么？如何移动它？“六边形是什么/这条路径是如何定义的？”托马斯·六边形画着，除了一个演示之外，什么都没有。白点通过以下方式移动：

js const angle=Math.PI/6 const radius=300 const x=center.x+Math.cos（angle）*radius const y=center.y+Math.sin（angle）*radius

@Thomas我更新了问题，添加了如何旋转白点。圆点只是一个弧，白点是什么？你怎么移动它？“六边形是什么/这条路径是如何定义的？”托马斯·六边形画着，除了一个演示之外，什么都没有。白点通过以下方式移动：

js const angle=Math.PI/6 const radius=300 const x=center.x+Math.cos（angle）*radius const y=center.y+Math.sin（angle）*radius

@Thomas我更新了问题，添加了如何旋转白点。这个圆点就是一个弧，你是最棒的！！非常感谢你！！正是我需要的。非常感谢你的努力！！你是最棒的！！非常感谢你！！正是我需要的。非常感谢你的努力！！