イメージをキャンバス内で独自の中心で回転する

Question

リテラルな角度の値を渡すと、私は奇妙な問題を抱えています（前の角度をコンソールで表示し、代わりに変数を入れます）。以下の私のコードのように変数を渡すコードでは、画像は「より多くのトップと多くの左」（すみません私の悪い英語のため）

function setImg(src,x,y,angle) 
{ 
    var TO_RADIANS = Math.PI/180; 
    var base_image = new Image(); 
    base_image.src = src 
    base_image.onload = function() { 
     console.log("-->->"+parseFloat(angle)) 
      ctx.save(); //saves the state of canvas 
      ctx.translate(x+(base_image.width/2), y+(base_image.height/2)); //let's translate 
      ctx.rotate(angle*TO_RADIANS); //increment the angle and rotate the image 
      ctx.drawImage(base_image, -(base_image.width/2),-(base_image.height/2)); //draw the image ;) 
      ctx.restore(); //restore the state of canvas 
    }; 

} 

おかげで描かれています！

Answer 1

ファンクションctx.transform,ctx.rotate、ctx.scaleおよびctx.translateは、新しいマトリックスを作成し、既存の変換にその新しいマトリックスを掛けることによって機能します。

これは、これらの関数の使用結果が変換の現在の状態によって異なることを意味します。

変換がデフォルト（同一性）マトリックスに適用されるようにするには、変換行列を関数ctx.setTransform(1, 0, 0, 1, 0, 0)でリセットします。変換行列は、既存の行列を新しいデフォルト行列に置き換えます。

変換の各セットの前にこれを行う場合は、現在の変換状態を維持するために、保存と復元を使用する必要はありません。