とある観賞用のプログラムを作成しているのですが、キャラクターの向きを反転させる必要がありまして、単純に向きを１８０度変更するなら簡単なんですが、車と同様に動いているものは急には向きを変更できないわけで、円弧を描いて反転させたいわけです。
そこで曲線を描いて移動するプログラムを書く必要があり、Flash(ActionScript)の「曲線について」のサイトを参考にさせてもらいました。
CANVASにも曲線を描く描画用APIがあるのですが、それは曲線を描くだけでありキャラクターを移動させるには曲線を描くまでの座標が必要になります。
オリジナルのサイトと違うのは矢印のサイズで、観賞用のプログラムと合わせるため、32x32の正方形ではなく、32x48と長方形になっております。そのためキャラクターの回転用に別途隠しCanvasエレメントを用意しています。
キャラクターの向きは逆タンジェントMath.atan2(y1 - y2 , x1 - x2) を使って、１つ前の座標と現座標で角度(ラジアン)を求めて向きを変えています。
アークタンジェントの説明は下記サイトでも。
http://www.accessgames-blog.com/blog/2010/03/post-cf05.html
