使图像在<canvas>与JavaScript键盘输入移动？

我一直在试图做一些看起来应该很简单的事情，但我一直在打墙。我想编写JavaScript代码，该代码需要在画布标签内部绘制图像并通过键盘输入移动它。当我按下右箭头键时，我希望图像向右移动。当我按左箭头键时，我想让图像向左移动。我希望它继续前进，直到我释放密钥为止，对每次按下按键时滑动一下的东西我都不感兴趣。这是我到目前为止：使图像在<canvas>与JavaScript键盘输入移动？

<html> 
<body onload="load_image()"> 

<canvas id="myCanvas" width="320" height="240" style="border:1px solid #000000;"> 
<img id="testpic" src="testpic.png"> 
</canvas> 

<script> 
function load_image() { 
var c = document.getElementById("myCanvas"); 
var ctx = c.getContext("2d"); 
var img = document.getElementById("testpic"); 
ctx.drawImage(img,10,10);} 

document.addEventListener('keydown', function(event) { 
    if (event.keyCode == 37) { 
// CODE THAT STARTS LEFT IMAGE MOVEMENT GOES HERE. 
    } 
    else if (event.keyCode == 39) { 
// CODE THAT STARTS RIGHT IMAGE MOVEMENT GOES HERE. 
    } 
}, true); 

document.addEventListener('keyup', function(event) { 
    if (event.keyCode == 37) { 
// CODE THAT STOPS LEFT IMAGE MOVEMENT GOES HERE. 
    } 
    else if (event.keyCode == 39) { 
// CODE THAT STOPS RIGHT IMAGE MOVEMENT GOES HERE. 
    } 
}, true); 


</script> 

</body> 
</html>

我一直在尝试从几个网站的例子，但没有一个工作。我能做的最好的事情是通过按键来反复重绘图像，这对我不起作用。任何提示或指导将不胜感激。如果你向我介绍工作代码，我会爱你的！

来源

2015-07-10 Matthew

“我能做的最好的事情是用键盘重复地重新绘制图像，这对我不起作用。”我很抱歉地说你不能用其他方式。要在画布中获得某些动画，您需要重绘它。 – evolutionxbox

@evolutionxbox：那么，HTML5画布真的是那个贫民窟？你必须反复移除/重绘才能获得滑动图像效果？这对我来说似乎很荒谬。 – Matthew

这不是贫民窟。这就是所有动画的工作原理。使用CSS，您（程序员）无法访问该动画级别。这就是你的电脑如何在你的显示器上放置图像。它一次又一次地以大约60倍的速度绘制它们。 – evolutionxbox

我做了你想要的这里工作小提琴：https://jsfiddle.net/uu4jqpqy/1/

主要的一点是，你必须有setInterval做重绘的环路上的一个键正确的方向下来，关键了清除该区间：

if (event.keyCode == 37) { 
    // CODE THAT STARTS LEFT IMAGE MOVEMENT GOES HERE. 
    if(!leftPointer) { 
     leftPointer = setInterval(function() { 
      xval = xval - 1; 
      ctx.clearRect(0, 0, c.width, c.height); 
      ctx.drawImage(img,xval,yval); 
     }, speed) 
    } 
}

和

if (event.keyCode == 37) { 
    // CODE THAT STOPS LEFT IMAGE MOVEMENT GOES HERE. 
    clearInterval(leftPointer); 
}

你也必须作出一些变量的外部范围中来得到这个工作。

来源

2015-07-10 15:57:12 Starscream1984

是的！谢谢，这看起来好像会做到这一点......问题，EventListener如何退出小提琴工作？如果我可以在我的测试页面上运行，我会考虑这个答案。顺便说一句，我是gen1变形金刚迷！：D – Matthew

真棒，变形金刚一路走过 - 在jsfiddle网站，你必须先点击进入输出面板，靠近画布图像，让关键听众工作，如果这就是你的意思 – Starscream1984

啊不，我看到了什么你的意思是，我忘了在清除间隔后清除变量，更新了我的小提琴：https://jsfiddle.net/uu4jqpqy/2/ – Starscream1984

使图像在<canvas>与JavaScript键盘输入移动？

回答

相关问题