HTML5キャンバスで画像を下中央の角を基準に回転させる方法

HTML5の<canvas>要素では、画像を任意の点を軸にして回転させることができます。デフォルトの回転は左上原点（0, 0）を基準に行われますが、少し工夫することで「画像の下中央」を軸にした回転も実現できます。

ポイントは、座標系の原点を移動（translate）してから回転（rotate）し、描画時にオフセットを調整するという手順です。以下に具体的な手順を解説します。

手順1：translate()で原点を画像の下中央に移動する

まず、コンテキストの原点を回転の軸にしたい位置、つまり画像の下中央に移動します。ここでは例として、座標(32, 120)を指定します。

context.translate(32, 120);

これにより、それ以降の描画や回転はすべてこの新しい原点を基準に行われるようになります。

手順2：rotate()でキャンバスを回転させる

次に、rotate()メソッドでキャンバス自体を回転させます。引数にはラジアンを指定する必要があるため、角度から変換するには Math.PI / 180 を掛けます。たとえば90度回転させる場合は次のように書きます。

context.rotate(90 * Math.PI / 180);

手順3：drawImage()で負のオフセットを指定して画像を描く

最後に画像を描画します。ここが重要なポイントです。原点がすでに下中央にあるため、画像全体がその点を中心に配置されるよう、幅の半分と高さ分だけ負の値でオフセットします。

context.drawImage(img, -32, -120, 64, 120);

この例では、画像サイズは幅64px・高さ120pxです。X方向に-32（幅の半分）、Y方向に-120（高さ全体）ずらすことで、原点である(32, 120)の位置がちょうど画像の下中央になります。結果として、画像は下中央の角を軸に回転して表示されます。

コード全体の流れ

// コンテキスト取得
const context = canvas.getContext('2d');

// 原点を下中央に移動
context.translate(32, 120);

// キャンバスを90度回転
context.rotate(90 * Math.PI / 180);

// 負のオフセット付きで画像を描画
context.drawImage(img, -32, -120, 64, 120);

まとめ

• translate()で回転の中心となる点へ原点を移動する
• rotate()の引数は度ではなくラジアンで指定する
• drawImage()では、画像の半幅・全高さ分の負のオフセットを使って位置を調整する

この手法は、針時計の針や風車、ゲーム内の砲台など、「特定の端を支点に回す」表現に幅広く応用できます。requestAnimationFrame()などと組み合わせてrotate()の角度を少しずつ増やせば、スムーズな回転アニメーションも簡単に実装できます。