キャンバスの内側にイメージスプライトをマウスの後につけてください。

Question

私はこの一日中苦労しています。画像をマウスポインタに追従させることができますが、画像の角度を変えようとすると動作させることができません。ここでコードを確認することができます：jsbin example。 正しい方法でマウスの後に別の黒い四角形がありますが、私はスプライトイメージで動作させることはできません。

Answer 1

画像の中央で回転が発生するように正しく翻訳していません。幅と高さの半分を平行移動し、回転を行い、次に平行移動する必要があります。私はあなたのSpriteImageを正しく変換するためにrenderメソッドを更新しました

：

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