如何移动canvas中的图片？

Question

帮助移动 canvas 上的元素。如何在 canvas 上添加图像并通过按下键盘上的按钮使它们移动

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

Answer 1

您可以通过两种方式在 canvas 上移动 "shape"：

只需重新计算每帧形状的绝对坐标即可。
使用变换（在 CG 中常用的方法）。在您的情况下，您需要 translation。（参见 http://www.html5canvastutorials.com/advanced/html5-canvas-transform-translate-tutorial/) To really undestand how to use that, It might additionally be usefull to read something about the state-stack http://www.html5canvastutorials.com/advanced/html5-canvas-transformation-state-stack-tutorial/

如何移动canvas中的图片？

How to move an image in the canvas?

html

javascript

canvas

html5-canvas