Как перемещать изображение на холсте?

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/) Чтобы действительно undestand, как использовать это, он может дополнительно быть полезно что-то о государственном стеке http://www.html5canvastutorials.com/advanced/html5-canvas-transformation-state-stack-tutorial/