web-dev-qa-db-ja.com

HTML5 Canvasを使用-任意の点を中心に画像を回転

背景として半円形（北半球）画像の上にあるダイヤルを回転させます。範囲は0〜180度です。キャンバス変換を行うメソッドへの入力では、ダイヤルが回転し、一致した値で停止します。 phrogz で渡されたヘルプとサンプルに基づいて、私が試していたものを次に示します。

html5canvashtml5-animation
35
Abhijit

一般的に、あなたがしたいことは：

  1. コンテキストを、オブジェクトが回転するキャンバス上のポイントに変換します。
  2. コンテキストを回転させます。
  3. 回転中心のオブジェクト内の負のオフセットによってコンテキストを変換します。
  4. オブジェクトを0,0に描画します。

コード内：

_ctx.save();
ctx.translate( canvasRotationCenterX, canvasRotationCenterY );
ctx.rotate( rotationAmountInRadians );
ctx.translate( -objectRotationCenterX, -objectRotationCenterY );
ctx.drawImage( myImageOrCanvas, 0, 0 );
ctx.restore();
_

これが 実行例 の動作を示しています。 （回転の計算は、素早くスケッチされたゲージダイヤルに適合するスイング量とラジアン単位のオフセットを見つけるために実験的にハッキングされました。）

明らかなように、上記のステップ＃3のtranslate呼び出しをdrawImage()呼び出しへのオフセットに置き換えることができます。例えば：

_ctx.drawImage( myImageOrCanvas, -objectRotationCenterX, -objectRotationCenterY );
_

同じ場所に複数のオブジェクトを描画する場合は、コンテキスト変換の使用をお勧めします。

89
Phrogz