キャンバス上の画像をマウスオーバー位置に回転させるのに役立つ必要があります

Question

画像をマウスポインタに向けて回転させることができません。 私は確信していません私はコードが正しい方向に行く場合。これまでのところ イメージをキャンバスの周りで動かすことができますが、私は最終的にはマウスクリックで弾丸を持っていくので、マウスに向かって回転させる必要があります。アドバイスをいただければ幸いです。私の見関数は私のdrawPlayer機能かどうかにする必要があれば私が..わからない

(function() { 
    var canvas; 
    var context; 
    var width; 
    var height; 
    var speed = 8; 
    var interval_id; 
    var ps = []; 
    var bullets = []; 
    var player = { 
     x: 0, 
     y: 0, 
     hero: new Image(), 
     size: 10, 
    }; 
    var mouse = { 
     x: 0, 
     y: 0, 
    } 
    var moveLeft = false; 
    var moveRight = false; 
    var moveUp = false; 
    var moveDown = false; 
    document.addEventListener('DOMContentLoaded', init, false); 

    function init() { 
     canvas = document.querySelector('canvas'); 
     context = canvas.getContext('2d'); 
     width = canvas.width; 
     height = canvas.height; 
     player.hero.src = 'hero.png'; 
     context.drawImage(player.hero, player.x, player.y); 
     window.addEventListener("keydown", activate, false); 
     window.addEventListener("keyup", deactivate, false); 
     window.addEventListener("mouseover", look, false); 
     interval_player = window.setInterval(drawPlayer, 33); 
    } 

    function drawPlayer() { 
     context.clearRect(0, 0, width, height); 
     context.drawImage(player.hero, player.x, player.y); 
     if (moveRight) { 
      player.x += speed; 
     } 
     if (moveUp) { 
      player.y -= speed; 
     } 
     if (moveDown) { 
      player.y += speed; 
     } 
     if (moveLeft) { 
      player.x -= speed; 
     } 
    } 
    // ******* this is where im trying to get the image to rotate ********// 
    function look(event) { 
     var offset = player.hero.offset(); 
     var center_x = (offset.left) + (player.hero.width()/2); 
     var center_y = (offset.top) + (player.hero.height()/2); 
     var mouse_x = event.pageX; 
     var mouse_y = event.pageY; 
     var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y); 
     var degree = (radians * (180/Math.PI) * -1) + 90; 
     player.hero.css('-moz-transform', 'rotate(' + degree + 'deg)'); 
     player.hero.css('-webkit-transform', 'rotate(' + degree + 'deg)'); 
     player.hero.css('-o-transform', 'rotate(' + degree + 'deg)'); 
     player.hero.css('-ms-transform', 'rotate(' + degree + 'deg)'); 
    } 

    function activate(event) { 
     var keyCode = event.keyCode; 
     if (keyCode === 87) { 
      moveUp = true; 
     } else if (keyCode === 68) { 
      moveRight = true; 
     } else if (keyCode === 83) { 
      moveDown = true; 
     } else if (keyCode === 65) { 
      moveLeft = true; 
     } 
    } 

    function deactivate(event) { 
     var keyCode = event.keyCode; 
     if (keyCode === 87) { 
      moveUp = false; 
     } else if (keyCode === 68) { 
      moveRight = false; 
     } else if (keyCode === 83) { 
      moveDown = false; 
     } else if (keyCode === 65) { 
      moveLeft = false; 
     } 
    } 

    function getRandomNumber(min, max) { 
     return Math.round(Math.random() * (max - min)) + min; 
    } 

    function stop() { 
     clearInterval(interval_player); 
    } 
})(); 

X軸はルックアット点までの画像位置（マウス）とyからの正規化ベクトルである

Answer 1

利用のsetTransform軸は（明らかに）x軸に対して90度

function drawImagePointingAt(image,x,y,pointX,pointY){ 
    var xdx = pointX - x; // get direction from image to point 
    var xdy = pointY - y; 
    var dist = Math.sqrt(xdx*xdx+xdy*xdy); // get distance 
    xdx /= dist; // normalize direction 
    xdy /= dist; 
    // xdx,xdy is the x axis 
    // -xdy, xdx is the y axis 
    ctx.setTransform(xdx,xdy,-xdy,xdx,x,y); // set transform to point at point 
    ctx.drawImage(image,-image.width/2, -image.height/2); 
} 

それとも、復元するには回転

function drawImagePointingAt(image,x,y,pointX,pointY, rotOffset){ 
    var xdx = pointX - x; // get direction from image to point 
    var xdy = pointY - y; 
    var dist = Math.sqrt(xdx*xdx+xdy*xdy); // get distance 
    xdx /= dist; // normalize direction 
    xdy /= dist; 
    ctx.setTransform(xdx,xdy,-xdy,xdx,x,y); // set transform to point at point 
    ctx.rotate(rotOffset); 
    ctx.drawImage(image,-image.width/2, -image.height/2); 
} 

を相殺する必要がある場合、デフォルトは

変換であります

ctx.setTransform(1,0,0,1,0,0);