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

Question

http://gist.github.com/232194

我知道我在drawGuy中的转换有问题。任何人都可以帮我弄清楚如何旋转图像？目前它旋转得很好，但我对变换的一些东西扭曲它，所以它不能正确地跟随鼠标。

Answer 1

而不是向前翻译然后再向后翻译，只需在你进行翻译/旋转之前将当前状态推到堆栈上，当你完成后 - 将你的状态从堆栈中弹回。这就是大多数图形应用程序使用翻译/旋转的方式。

此外，您正在翻译x, y，然后另外调用ctx.drawImage(guy, x, y)。实际上，这将使偏移加倍。我要么删除translate调用，要么将drawImage调用的position参数更改为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()的规范（画布执行状态推送/弹出的方式），here。