Question

我一直在尝试做一些看起来应该非常简单的事情，但我一直在打墙。我想写一个javascript代码，它采用在canvas标签内绘制的图像并通过键盘输入移动它。当我按右箭头键时，我希望图像向右移动。当我按左箭头键时，我希望图像向左移动。我希望它继续移动，直到我释放密钥，我对每次按键只滑动一下的东西不感兴趣。这是我到目前为止所提出的：

<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>

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

Answer 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);
}

您还必须在外部范围内创建一些变量才能使其生效。

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

1 个答案: