Question

我的火箭在我的画布上稍微延迟跟着鼠标，我希望它在它四处走动时指向鼠标。我几乎得到了它，你可以在我的小提琴 HERE 中看到。我的问题是旋转方向与我想要的方向相反，而且它只是奇怪而且简陋。

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);

<强> Live Demo

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);

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

3 个答案: