Javascript 如何使用Key溺水在画布上移动图像

在我正在从事的一个项目中，一个核心功能是能够使用WASD键在HTML5画布元素周围移动图像。由于默认键盘行为的性质，我决定使用库来移动图像。不幸的是，因为我不是一个经验丰富的程序员，这个目标已经被证明是一个障碍。这是我目前的代码：

var canvas=document.getElementById（“myCanvas”）；
var ctx=canvas.getContext（“2d”）；
var xPos=-1320；
var-yPos=-495；
ctx.beginPath（）
ctx.fillStyle=“#FF0000”
ctx.arc（400225,30,0,2*Math.PI）
ctx.stroke（）
ctx.fill（）
//创建图像对象
var background=新图像（）；
//添加onload事件处理程序
background.onload=函数（）{
//加载完毕，现在我们可以使用图像了
ctx.drawImage（背景、xPos、YPO）；
};
功能移动（e）{
/*如果（e.keyCode==68）{
xPos-=10；
}
如果（e.keyCode==65）{
xPos+=10；
}
如果（e.keyCode==87）{
yPos+=10；
}
如果（e.keyCode==83）{
yPos-=10；
}*/
kd.D.down（功能（）{
xPos-=10；
console.log（xPos）
})
kd.A.down（功能（）{
xPos+=10
})
kd.W.down（函数（）{
yPos+=10
})
kd.P.down（函数（）{
yPos-=10
})
kd.run（函数（）{
kd.tick（）；
})
canvas.width=canvas.width；
ctx.drawImage（背景、xPos、YPO）；
}
//document.onkeydown=移动；
background.src=”https://wallpapertag.com/wallpaper/full/8/1/8/399576-synthwave-wallpaper-3440x1440-screen.jpg";

您的浏览器不支持HTML5画布标记。
首先，您不应该使用
canvas.width=canvas.width
。相反，使用类似于
clearRect（0，0，canvas.width，canvas.height）

要使用键盘移动某些东西，您必须执行以下操作：


document.addEventListener（“键控键控”，（e）=>{
如果（e.keyCode==68）{
xPos-=10；
}
如果（e.keyCode==65）{
xPos+=10；
}
如果（e.keyCode==87）{
yPos+=10；
}
如果（e.keyCode==83）{
yPos-=10；
}
});