在跟随时使画布图像指向鼠标

Question

我有一个跟随鼠标的火箭，我的画布略有延迟，我希望它在它四处走动时指向鼠标。 我几乎得到它，你可以在我的小提琴看这里 。 我的问题是旋转方向与我想要的方向相反，而且它只是奇怪而且诡异。

我在我的画布上用它来实现它的JS是：

ctx.save();
                var offsetY = targetToGo.x - shape.y ;
                var offsetX = targetToGo.y - shape.x ;
                var degrees = -Math.atan2(offsetY,offsetX);                     
                    ctx.translate(shape.x, shape.y);

                    ctx.rotate(degrees);

                    ctx.drawImage(shape.image,-shape.image.width/2,-shape.image.width/2);

                    ctx.restore();

是画布代码还是数学错误？ 我两个都不好。

Answer 1

改变线

var degrees = -Math.atan2(offsetY,offsetX);      

至

var degrees = Math.atan2(offsetY,-offsetX);

现场演示

Answer 2

数学错了。 否定offsetY和offsetX将修复它。

var degrees = -Math.atan2(-offsetY, -offsetX);

角度也不是以度为单位而是弧度。

Answer 3

像这样计算偏移量。

var offsetY = targetToGo.x - shape.x ;    
var offsetX = targetToGo.y - shape.y ;

并应用此轮换。

ctx.rotate(degrees+Math.PI);