JavaScript - 固定角度で図形を回転させよう

Question

HTMLキャンバス上の円の周りに形を移動したい。

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）で設定されている：私は、次のJavaScriptのロジックを使用しています。 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; 

各キーを押すたびに、この変数をインクリメントまたはデクリメントしてシェイプを再描画します。