Я просто хочу повернуть и переместить изображение! (Javascript, <canvas>, HTML 5)

Question

http://gist.github.com/232194

Я знаю, что что-то не так с моими трансформациями в drawGuy. Может кто-нибудь помочь мне разобраться, как повернуть только изображение? В настоящее время он вращается нормально, но я что-то с преобразованиями искажает, так что он не следует за мышью правильно.

Answer 1

Вместо того, чтобы переводить вперед, а затем снова переводить назад, просто поместите ваше текущее состояние в стек перед тем, как вы начнете перемещать / вращать, а когда вы закончите - вытолкните свое состояние обратно из стека. Вот как большинство графических приложений используют переводы / вращения.

Кроме того, вы переводите x, y, а затем дополнительно звоните ctx.drawImage(guy, <strong>x</strong>, <strong>y</strong>). По сути, это удвоит смещение. Я бы либо избавился от вызова translate, либо изменил бы аргументы позиции для вызова drawImage на 0, 0.

function drawGuy() {
    ctx.save();                                                                                                                        
    ctx.translate(x,y);     
    ctx.rotate(angle * Math.PI / 180);                                                                               
    ctx.drawImage(guy, 0, 0); 
    ctx.restore();                                            
}

Ознакомьтесь со спецификациями о context.save() и context.restore() (способ, которым canvas определяет состояние push / pop), здесь .