Canvas rotateメソッドの回転の中心位置を指定する

Canvasのrotateメソッドは斜めに矩形を描画するときなどに役に立ちますが, デフォルトの状態では回転の中心はCanvasの左上, つまり, (0, 0) が中心となるので意図した回転にならないことが多いです.

そこで, translateメソッドを利用します. translateメソッドを利用することで, そのメソッドを呼び出し以降描画の位置を, 指定したぶんだけ移動させることが可能になりますが, それがrotateメソッドの回転の中心にも影響させることが可能です.

こんな感じ.

var canvas  = document.querySelector('canvas');
var context = canvas.getContext('2d');

var width  = canvas.width;
var height = canvas.height;

//回転の中心を中央に移動
context.translate(parseInt(width / 2), parseInt(height / 2)); 

//回転 (45°)
context.rotate((45 * Math.PI) / 180);

ただし, これだとそれ以降に描画したものはtranslateメソッドで指定した座標だけ移動してしまうので,
そうしたくない場合は, 一時的にそのtranslateメソッドの影響を与えるように, save / restoreメソッドを利用します.

var canvas  = document.querySelector('canvas');
var context = canvas.getContext('2d');

var width  = canvas.width;
var height = canvas.height;

//translateメソッド前の設定を保存
context.save();
//回転の中心を中央に移動
context.translate(parseInt(width / 2), parseInt(height / 2)); 

//回転 (45°)
context.rotate((45 * Math.PI) / 180);

//translateメソッド前の設定に戻す
context.restore();

以上です.
 

コメントを残す