Question

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

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

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

只需重新计算每一帧形状的绝对坐标。
使用转换（在CG中常用的方法）。在您的情况下，您需要translation。（参见http://www.html5canvastutorials.com/advanced/html5-canvas-transform-translate-tutorial/）要真正找不到如何使用它，阅读有关状态堆栈http://www.html5canvastutorials.com/advanced/html5-canvas-transformation-state-stack-tutorial/

如何在画布中移动图像？

1 个答案: