JavaScript和HTML5 - 向鼠标旋转字符

我的画布中间有一个图像，我想旋转它以面对鼠标在画布上的位置。JavaScript和HTML5 - 向鼠标旋转字符

我有我的鼠标位置的变量，我已经把我的图像放在一个矩阵，所以它目前完全旋转在给定值的中心，现在我只需要连接两个。

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


}

来源

2013-01-21 Oliver Jones

从TRIG，你正在寻找的角度将

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

但首先，你需要确保你的坐标为中心的，所以从mouseX和mouseY的加减游戏宽度的一半，然后只需使用上述即可获得

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

来源

2013-01-22 00:03:10

JavaScript和HTML5 - 向鼠标旋转字符

回答

相关问题