JavaScript - 将形状旋转固定 Angular

Question

我想在 HTML Canvas 上围绕圆周移动一个形状。我正在使用以下 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

您需要在每次开始绘制时访问的变量中保存起始 Angular :

这一行:

angle = Math.PI/2;

应该看起来像这样:

angle = window.starting_angle;

在每次按键时，您可以递增或递减此变量并重新绘制形状。