JavaScript - 以固定角度

Question

我想在HTML画布上围绕圆周移动一个形状。我使用以下JavaScript逻辑：

speed = 0.005;
angle = Math.PI/2;
angle +=  speed * direction;
var x = cx + (radius * Math.cos(angle));
var y = cy + (radius * Math.sin(angle));

按键设置

direction（左箭头= -1，右箭头= +1）。 cx和cy是固定的 - 它们是形状移动的圆心的x和y坐标。

我想以固定的步骤围绕圆圈移动形状，比如时钟的秒针。但是，应该有187个步骤。我知道划分360/187 = 1.9251度= 0.03359弧度。但是，我的绘图函数位于循环内部，因此编写angle += 0.03359会使形状永远围绕圆圈旋转。

如何使每个按键按顺时针或逆时针方向围绕圆圈移动形状，但步长为0.3359弧度？

我正在使用我在rafaelcastrocouto为这个问题撰写的答案中找到的逻辑：how to move object in circle forward and backward in html5 canvas?

Answer 1

您需要保存每次开始绘制时可以访问的起始角度：

这一行：

angle = Math.PI/2;

应该是这样的：

angle = window.starting_angle;

在每个按键上，您可以递增或递减此变量并重绘形状。