Question

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

我正在尝试根据玩家向左或向右按下的数量来旋转画布中的单个图像。

我无法理解这是如何运作的，任何人都可以帮忙吗？

Answer 1

捕获左键＆lt; （ 37 ）和右键＆gt; （ 39 ）你可以调用更新图像旋转因子的函数，在此示例中，此因子将转换为度。

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/

无法在画布内旋转图像

1 个答案: