我只想旋转并移动图像！ （Javascript，<canvas>，html 5）

Question

http://gist.github.com/232194

我知道在drawGuy中我的转换出了问题。任何人都可以帮我弄清楚如何旋转图像？目前它可以很好地旋转，但是我用变换的东西扭曲了它，所以它没有正确地跟着鼠标。

Answer 1

而不是翻译前进，然后再翻译向后，只需将您当前的状态推到堆栈上，然后再进行traslate/rotate，并且完成后 - 将状态从堆栈中弹出。这是大多数图形应用程序如何使用翻译/旋转。

此外，您正在翻译x, y，然后另外拨打ctx.drawImage(guy, x, y)。实际上，这将使偏移量加倍。我要么摆脱翻译调用，要么将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()（画布的方式确实状态推/ POP），here。