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; 

在每個按鍵上，您可以增加或減少此變量並重新繪製形狀。