javascript - 我只想旋转和移动图像! (Javascript, , 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 状态推送/弹出的方式)，here .