为什么我的Javascript画布图像不移动，我看到没有错误

Question

我试图在屏幕上移动我的图像。我正在使用html5画布元素，我正在使用Xpos变量的图像的X位置。我的图像正在加载…但是当尝试使用我将要展示的代码时，什么都没有发生，它只是坐在那里....它没有给我任何错误!知道我做错了什么吗?如果有，请告诉我。这是代码，由于

Xpos = Xpos + 5
document.addEventListener("keydown", keyPush)
function keyPush(evt) {
switch (evt.keyCode) {
case 37:
break;
}
}
var canvas = document.getElementById("myCanvas")
var ctx = canvas.getContext("2d")
var imgPath = "Piskel.png"
var imgObj = new Image()
imgObj.src = imgPath
imgObj.onload = function() {
ctx.drawImage(imgObj, Xpos, 100, 100, 70)
}

<canvas id="myCanvas" width="800" height="600"></canvas>

Answer 1

你只画了一次画布，你需要一个requestAnimationFrame(callback)来更新你的画布。

请看看画布教程(MDN)，特别是基本动画部分