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

您需要保存在你每次访问avariable起始角度开始绘制：

这行：

angle = Math.PI/2; 

应该再是这样的：

angle = window.starting_angle; 

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