使畫布內的圖像精靈跟隨鼠標

Question

我一直在爲這一整天掙扎。我可以使圖像跟隨鼠標指針，但是當我嘗試轉動圖像角度時，我無法使其工作。您可以在這裏查看代碼：jsbin example。 以正確的方式在鼠標後面有另一個黑色方塊，但我無法使其與精靈圖像一起工作。

Answer 1

您無法正確翻譯圖像中心的旋轉。你需要翻譯一半的寬度和高度，做旋轉，然後翻譯回來。

我已經更新了你的SpriteImage渲染方法正確翻譯：

this.render = function(xPos, yPos, scale, w, h, angle) { 
    ctx.save(); 

    ctx.translate(xPos, yPos); 
    ctx.translate(w/2, h/2); 
    ctx.rotate(angle); 
    ctx.translate(-w/2, -h/2); 
    ctx.fillRect(0, 0, w, h); 

    //console.log('angle:',angle); 
    ctx.drawImage(this.img, 
     this.x, this.y, 
     w, h, 
     0, 0, 
     width*scale, height*scale); 
    ctx.restore(); 
}; 

[編輯] 這裏給jsbin鏈接與更新的代碼：http://output.jsbin.com/tulimaxavu/1/edit