読者です 読者をやめる 読者になる 読者になる

フロントサイドエンジニアという選択肢

HTMLコーダー → ECサイト運営 → システムエンジニア という経歴の著者がフロントサイトエンジニアという職業に今後の活路を見出し、その道に進むために取得した技術を貯めておくブログ

(Javascript)Canvasの基本 オブジェクトを回転させる

Canvasで描画したオブジェクトを回転させるには、rotateメソッドを使用しますが、少しクセがあるので、できるだけわかりやすく理解できるように残しておきます。

まず、オブジェクトの回転には、以下のようなルールがあります。

  1. rotateメソッドはオブジェクトではなく、canvasを回転させる。
  2. rotateメソッドは、座標の起点(0,0)を中心に回転させる
  3. オブジェクトを回転させるには、座標の起点をオブジェクトの中心に変更する必要がある
  4. 座標の起点を変更すると、描画するオブジェクトの座標も起点が変わってくる
  5. オブジェクトを回転させるには、rotateメソッドを呼び出した後で描画しなければならない。
  6. 一度回転を行うと、その後描画するすべてのオブジェクトに影響されてしまう。
通常の矩形の描画

たとえば、x=100, y=150の位置に幅50、高さ40の矩形を描画する場合は

fillRect(100, 150, 50, 40);

と指定します。

回転させる

回転させるためには座標を矩形の中心に移動させる必要があります。座標を移動させるには、setTransformメソッドを呼び出してから、translateメソッドで座標を移動します。

context.setTransform(1, 0, 0, 1, 0, 0);
context.translate(100+25, 150+20); // 座標+矩形の中心までの長さ

translateメソッドの引数は、x座標とy座標ですが、この場合、矩形の中心に座標を移動するので、「座標+矩形の中心までの長さ」となります。

矩形の位置を修正する

上記の結果、いままでx=125, y=170だった座標の位置がx=0, y=0として扱われるので、矩形の描画位置をx=100, y=150としてしまうと、本来x=225, y=320だった位置に描画されてしまいます。新しい座標を起点として描画するには

fillRect(-25, -20, 50, 40)

とします。座標をマイナスにしたのは、新しく変更した起点の位置に矩形の左上が来るので、起点を矩形の中心にするには、幅と高さの半分を食い込ませる形にするためです。

実際の回転を行うのはrotateメソッドですが、このメソッドを呼び出す前に描画されたオブジェクトには反映されません。また、一度回転させてしまうと、再び元の位置に回転させるまで効果が続いてしまいます。特定のオブジェクトだけ回転させたい場合は、saverestoreメソッドを使用すると、部分のみ回転させることができます。

サンプル

上記の解説をまとめたサンプルが以下となります。

var context = document.getElementById('canvas').getContext('2d');
var _x = 100;
var _y = 150;
var width = 50;
var height = 40;

// 現在のcontextの設定(主に座標の起点や角度)を記憶させておく
context.save();

// canvasを変形させる準備
context.setTransform(1, 0, 0, 1, 0, 0);

// 起点をこれから描画する矩形の中心に移動させる
context.translate(_x + width / 2, _y + height / 2);

// canvasを45度回転
context.rotate(45 * Math.PI / 180);

// 矩形を描画
context.fillRect(_x, _y, width, height);

// contextの状態を最初に保存したときに戻す。
context.restore();