我只想旋轉並移動圖像！ （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。