您好，我在这个网站和互联网上花了几个小时大致了解如何使用 html5/javascript 移动对象，我找到了很多答案，但没有一个答案对我有用。我想解释一下我的问题:我只想用键盘控制移动这两个矩形之一，但没有帮助对我来说太难了(我才 2 个月学习 javascript/css/html5)。 请不要对这个问题投反对票，我想在这个网站上提供帮助，也希望得到帮助。
这是代码:
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="400" height="300" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,30,30);
var canvas1 = document.getElementById("myCanvas1");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(150,150,30,30);
</script>
</body>
</html>
谢谢大家，我想在这里向意大利学习，但没有合适的学校/类(class)，我必须在互联网上努力学习才能做到这一点。
最佳答案
您需要监听键盘事件，并捕获要用来移动矩形的键的键码。然后，您可以增加/减少矩形对象的绝对位置以移动它。
document.addEventListener('keydown', function(event) {
if(event.keyCode == 37) {
object.x -= 1;
}
//top
else if(event.keyCode == 38) {
object.y -= 1;
}
//right
else if(event.keyCode == 39) {
object.x += 1;
}
//bottom
else if(event.keyCode == 40) {
object.y += 1;
}
}
这是一个working example
关于javascript - 如何移动该代码上的矩形 "var canvas1"？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37173029/