html - How to get a sprite to rotate to face the mouse position, using HTML5 canvas?

Question

I'm trying to follow this tutorial to create a homing missile in Flash, except I'd like to adapt it to use HTML5 canvas. I'm struggling with getting the sprite to face the direction of the mouse; it rotates but doesn't always face the mouse! I've put up a fiddle so you can see what's going on.

http://jsfiddle.net/Mr4Tz/

Any help would be greatly appreciated.

Answer 1

传递给 HTML5 旋转方法的角度值应该以弧度为单位，但您传递的是度数。

根据您的示例，这应该有效：

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

context.rotate(rotation);