JavaScriptのCanvas APIのrotate()メソッドを使い、キャンバスを座標変換する方法を解説します。
下準備
まずは下準備から。htmlの<body></body>内に以下のcanvas要素を配置します。
<canvas id="canvas"></canvas>jsにてコンテキストを取得します。
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
画像ではキャンバスの範囲がわかりやすいようにcssにて背景色を設定してあります。
rotate()メソッドでキャンバスを座標変換
まずは矩形を描画します。
ctx.strokeRect(0, 0, 80, 40);
rotate()メソッドを使うと、キャンバスの座標空間を回転することができます。strokeRect()の直前に以下のコードを追加します。
ctx.rotate(Math.PI * 0.25);
rotate(angle)の形式で引数に角度をラジアンで渡すと、原点を中心に座標空間が回転します。
描画位置のx座標を80に変更してさらに挙動を見てみましょう。
ctx.strokeRect(80, 0, 80, 40);
回転後の移動のため、描画位置が斜めに移動しているのがわかります。
rotate()の実用的な使い方
上の例は回転した後の描画位置の指定が難しく、実用的ではありません。描画する図形の中心で回転することでこれを解消します。下準備の後、以下のコードを追加します。
ctx.strokeRect(40, 40, 80, 40);
この矩形の中心で90度回転したものを描画したいとします。以下のコードを追加することでそれを実現します。
ctx.translate(80, 60);
ctx.rotate(Math.PI * 0.5);
ctx.translate(-80, -60);
ctx.strokeRect(40, 40, 80, 40);
translate()を使い、描画する図形の中心に原点を移動し、rotate()で90度回転します。その後再びtranslate()で原点を左上に戻します。その上で再び同じ位置に図形を描画すると、時計回りに90度回転して描画されます。角度を変えても同じように動作します。
