Question

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

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

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

从trig开始，你要找的角度是

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

但首先你要确保你的坐标居中，所以从mouseX和mouseY中减去游戏宽度的一半，然后用上面的方法来获取

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

JavaScript＆amp; HTML5 - 向鼠标旋转字符

1 个答案: