Javascript 如何在画布中移动图像？

有关在画布上移动元素的帮助。如何在画布上添加图像并通过按键盘上的按钮使其移动

document.addEventListener('keydown', function(event) {
    if(event.keyCode == 37)
    {
     launcher.dir = 'left';
    }
}, false);
document.addEventListener('keyup', function(event) {
    if(event.keyCode == 37)
    {
     launcher.dir = '';
    }
}, false); 
document.addEventListener('keydown', function(event) {
    if(event.keyCode == 39)
    {
     launcher.dir = 'right';
    }
}, false);
document.addEventListener('keyup', function(event) {
    if(event.keyCode == 39)
    {
     launcher.dir = '';
    }
}, false); 
left_btn.addEventListener('mouseup', function(event) {
    launcher.dir = '';
});
right_btn.addEventListener('mousedown', function(event) {
    launcher.dir = 'right';
});

可以通过两种方式在画布上移动“形状”：

• 只需重新计算每个帧形状的绝对坐标
• 使用变换（在CG中实现这一点的常用方法）。在您的情况下，您需要进行

  翻译

  。（请参阅）要真正了解如何使用它，还可以阅读一些关于状态堆栈的内容

---

只需使用drawImage而不是fillRect。在开始游戏之前，确保你的图像已经加载。我可以移动形状，但是如何移动图像而不是形状？？想象你在坐标[10,10]处绘制图像。如果在ctx.drawImage（10,10）之前调用ctx.translate（10,0），则应将其移至[20,10]。转换适用于画布上绘制的所有内容，而不仅仅是形状。所以你只需要在每一帧中调用translate来移动图像。为了防止，translate（）将应用于您绘制的所有其他内容，请使用ctx.save（）和ctx.restore（），如状态堆栈链接示例中所述。