使用 javascript 键盘输入使 <canvas> 中的图像移动？答案

【问题标题】：Make images in <canvas> move with javascript keyboard input?使用 javascript 键盘输入使 <canvas> 中的图像移动？
【发布时间】：2015-07-10 23:57:12
【问题描述】：

我一直在尝试做一些看起来应该很简单的事情，但我一直在碰壁。我想编写 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>

我一直在尝试来自多个网站的示例，但它们都不起作用。我能做的最好的就是用按键一遍又一遍地重绘图像，这对我不起作用。任何提示或指导将不胜感激。如果你给我工作代码，我会爱你的！

【问题讨论】：

“我能做的最好的事情就是用按键一遍又一遍地重绘图像，这对我不起作用”。我很抱歉地说你不能有任何其他方式。要在画布中制作动画，您需要重新绘制它。
@evolutionxbox：那么，HTML5 画布真的是那个贫民区吗？您必须一遍又一遍地删除/重绘才能获得滑动图像效果？这对我来说似乎很荒谬。
那不是贫民区。这就是所有动画的工作原理。使用 CSS，您（程序员）无法访问该级别的动画。这就是您的计算机将图像放在显示器上的方式。它以大约每秒 60 倍的速度一遍又一遍地绘制它们。
simonsarris.com/blog/510-making-html5-canvas-useful 阅读和学习
@evolutionxbox：我知道这一点，但我已经看到很多图像菜单平滑滑入和滑出的示例。我认为有一种更简单的方法可以为它们设置动画，然后煞费苦心地逐帧或循环编程。就像，我不知道，CSS 转换方法。 :P SerCrAsH，谢谢你的链接，但他们给出的例子是鼠标输入，我一直在寻找可以与 keydown/keyup 一起使用的东西。

标签： javascript html canvas

【解决方案1】：

我在这里做了你想要的工作：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);
}

您还必须在外部范围内创建一些变量才能使其正常工作。

【讨论】：

是的！谢谢，这看起来可以解决问题...问题是，EventListener 怎么会在小提琴中退出工作？如果我可以在我的测试页面上解决这个问题，我会考虑这个问题。顺便说一句，我也是变形金刚 1 代的粉丝！ :D
太棒了，Transformers all the way dude - 在 jsfiddle 站点中，您必须先单击画布图像附近的输出面板，以便关键侦听器工作，如果这就是您的意思跨度>
啊不，我明白你的意思了，我清除区间后忘记清除变量，更新我的小提琴：jsfiddle.net/uu4jqpqy/2
它完全有效。感谢您为我指明正确的方向！