if (player1Ready) {
ctx.save();
ctx.rotate(player1.rotation);
ctx.drawImage(player1Image, player1.x, player1.y,80,80);
ctx.restore(); }
我正在尝试根据玩家向左或向右按下的程度来旋转 Canvas 内的单个图像。
我无法理解这是如何工作的,有人可以帮忙吗?
最佳答案
捕获左键< (37) 和右键> (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/
关于javascript - 无法在 Canvas 内旋转图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44290100/