無法旋轉畫布內的圖像

Question

if (player1Ready) { 
    ctx.save(); 
    ctx.rotate(player1.rotation); 
    ctx.drawImage(player1Image, player1.x, player1.y,80,80); 
    ctx.restore(); } 

我想根據玩家向左或向右按​​下多少來在畫布內旋轉單個圖像。

我不明白這是如何工作的，任何人都可以幫忙嗎？

Answer 1

捕獲左鍵<（）和右鍵>（）可以調用該更新圖像旋轉因子的函數，在本例這種因子被轉換爲度。

document.onkeydown = function (e) { 
    if(e.keyCode == 39){ 
     angleInDegrees+=5; 
     drawRotated(angleInDegrees); 
    }else if(e.keyCode == 37){ 
     angleInDegrees-=5; 
     drawRotated(angleInDegrees); 
    } 
} 

function drawRotated(degrees){ 
    ctx.clearRect(0,0,canvas.width,canvas.height); 
    ctx.save(); 
    ctx.translate(canvas.width/2,canvas.height/2); 
    ctx.rotate(degrees*Math.PI/180); 
    ctx.drawImage(image,-image.width/2,-image.width/2); 
    ctx.restore(); 
} 

在這裏看到一個工作示例：http://jsfiddle.net/mathiasfcx/6ZsCz/3088/