html - HTML5キャンバスを使用して、スプライトをマウスの位置に向けて回転させるにはどうすればよいですか？

Question

このチュートリアルに従って、Flashでホーミングミサイルを作成しようとしています。ただし、HTML5キャンバスを使用するように調整したい場合を除きます。スプライトをマウスの方向に向けるのに苦労しています。回転しますが、常にマウスに向いているとは限りません。何が起こっているのかがわかるように、フィドルを付けました。

http://jsfiddle.net/Mr4Tz/

どんな助けでも大歓迎です。

Answer 1

HTML5のrotateメソッドに渡される角度の値はラジアンである必要がありますが、代わりに度を渡しています。

あなたの例に基づいて、これはうまくいくはずです：

var targetX  = mouse.x - missile.x
,   targetY  = mouse.y - missile.y
,   rotation = Math.atan2(targetY, targetX);

context.rotate(rotation);