JavaScript 和 HTML5 - 朝鼠标方向旋转角色

Question

我的 Canvas 中间有一个图像，我希望能够将其旋转以面向鼠标在 Canvas 上的位置。

我有鼠标位置的变量，并且我已将图像放置在矩阵中，因此它当前以给定值在中心完美旋转，现在我只需要连接两者。

var characterRotation = 0;

function characterController(){

    ctxMain.clearRect(0, 0, gameWidth, gameHeight);

    var charWidth = 65;
    var charHeight = 85;

    var srcX = 0;
    var srcY = 619;
    var drawX = gameWidth/2 - charWidth/2;
    var drawY = gameHeight/2 - charHeight/2;


    ctxMain.setTransform(1, 0, 0, 1, drawX, drawY);
    ctxMain.rotate(characterRotation * Math.PI/180);

    characterRotation = mouseX*2 / mouseY*2; // ?? this is what needs to roate my character

    ctxMain.drawImage(imgSprite, srcX, srcY, charWidth, charHeight, -charWidth/2, -charHeight/2, charWidth, charHeight);


}

Answer 1

根据三 Angular 函数，您要寻找的 Angular 为

sin( rotation ) = y / (x^2 + y^2)  # opposite/adjacent

但首先你需要确保你的坐标居中，所以从 mouseX 和 mouseY 中减去游戏宽度的一半，然后使用上面的得到

rotation = Math.asin( y / (x*x + y*y)