JavaScript & HTML5 - 向鼠标旋转字符答案

【问题标题】：JavaScript & HTML5 - Rotate Character Towards MouseJavaScript & HTML5 - 向鼠标旋转字符
【发布时间】：2013-01-21 23:22:25
【问题描述】：

我的画布中间有一张图像，我希望能够将其旋转到我的鼠标在画布上的位置。

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

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


}

【问题讨论】：

标签： javascript html rotation mouse

【解决方案1】：

从trig，你正在寻找的角度将是

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

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

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

【讨论】：