Javascript

rotate()を使ってcanvasで作成した四角形を回転させる

Javascript

canvasで図形を作成できるようにったので、rotateで回転させたいと思います。

canvasについては以下で解説しています。

rotate()とは

rotate()メソッドは、canvasと併用して使われ、物体を回転する際に使用します。
roteteは日本語で回転の意味です。割とよく描画系のソフトを使うと出てくる単語なので見かけたこともあるかと思います。

構文

rotate(angle)

angleには回転させる確度が入ります。回転方向は時計回りです。

単位はラジアンです。
(ラジアン=弧の長さが半径と等しくなる角度を1とする角度の単位のこと。)

簡単にrotate()できるかと思いきや、いろいろ学ばなければならないことも多いのでサンプルコードを元に少しずつ説明していきます。

サンプルコード 単純な回転

rotate()で回転させる時デフォルトの状態の場合、基準点はCanvas座標の左上が (0, 0)となっています。
そのため画面の中央で回転させたい場合などtranslate()を利用し回転の中心となる基準点を任意の場所へ移動してからrotate()させるのが一般的なようです。
translate(x, y)のように座標を指定して移動させます。

See the Pen rotate rect by Nakamoto (@programmerlife) on CodePen.

//HTMLのcanvas情報をcanvasへ関連付け
let canvas = document.getElementById(‘field’);
//コンテクストを取得
const ctx = canvas.getContext(‘2d’);
//横幅取得
let width = canvas.width;
//高さ取得
let height = canvas.height;
//線をリセット
ctx.beginPath();

//基準点を中央に移動
ctx.translate(parseInt(width / 2), parseInt(height / 2));
//回転 (45°)
ctx.rotate((45 * Math.PI) / 180);
//四角形を作成
ctx.rect(-25, -25, 50, 50);
//線を塗りつぶす
ctx.fill();

中心を軸に四角形の左下を起点に回転しているのが確認できるかと思います。
canvasの描画方法については「canvasで描画してみる!Javascript超初心者の勉強」の記事を参考にしていただければと思います。

サンプルコード 座標を戻して回転

好き好きかもしれませんが、基本的には動かした座標の基準点は左上にもどします。
(中央のままだと図形を任意の場所に動かすのが左上でなれているとなかなか難しいです。)

See the Pen rotate adjust point rect by Nakamoto (@programmerlife) on CodePen.

//HTMLのcanvas情報をcanvasへ関連付け
let canvas = document.getElementById(‘field’);
//コンテクストを取得
const ctx = canvas.getContext(‘2d’);
//横幅取得
let width  = canvas.width;
//高さ取得
let height = canvas.height;
//線をリセット
ctx.beginPath();

//基準点を中央に移動
ctx.translate(parseInt(width / 2), parseInt(height / 2));
//回転 (45°)
ctx.rotate((45 * Math.PI) / 180);
//線の基準点を戻す
ctx.translate(parseInt(width / -2), parseInt(height / -2)) ; //追加
//四角形を作成
ctx.rect(75, 75, 50, 50);
//線を塗りつぶす
ctx.fill();

左上を基準にxyを指定し、四角形を作成しました。

ctx.translate(parseInt(width / -2), parseInt(height / -2)) ; で基準点を左上に戻しています。

サンプルコード 回転 + アニメーション

rotateとsetIntervalは組み合わせてアニメーションしてみます。

setIntervalについては以下で詳しく解説しています。

それでは本題です。

See the Pen rotate + rect + setInterval by Nakamoto (@programmerlife) on CodePen.

//HTMLのcanvas情報をcanvasへ関連付け
let canvas = document.getElementById(‘field’);
//コンテクストを取得
const ctx = canvas.getContext(‘2d’);
//横幅取得
let width  = canvas.width;
//高さ取得
let height = canvas.height;

//変数角度を設定
let degree = 0;


setInterval(“rectRotate()”, 20);

function rectRotate(){
    ctx.save();
    ctx.beginPath();

    ctx.clearRect( 0, 0, width, height );

    //基準点を中央に移動
    ctx.translate(parseInt(width / 2), parseInt(height / 2));
    //回転 degreeに1加算
    ctx.rotate(( ++degree * Math.PI) / 180);

    //基準点をもどす
    ctx.translate(parseInt(width / -2), parseInt(height / -2)) ;

    //四角形を作成
    ctx.rect(75, 75, 50, 50);
    //線を塗りつぶす
    ctx.fill();
    ctx.restore();
}

一度canvasに描画した画像を消してから再描画してアニメーションをおこなっています。パラパラ漫画をイメージするとわかりやすいかもしれません。
そのためsave()、restore()など以下のメソッドも新たに使用します。深堀せず軽く説明です。

  • save()メソッドは、現在の描画状態を保存する際に使用します。
  • restore()メソッドは、描画状態を保存した時点のものに戻す際に使用します。
  • beginPath()メソッドは、現在のパスをリセットする際に使用します。
  • clearRect())メソッドは、座標 (x, y) を始点とする大きさ (width, height) の領域を、透明色(透明な黒)で塗りつぶします。領域内に描画されていたすべてのコンテンツは消去されます。

参考サイト
https://weblike-curtaincall.ssl-lolipop.jp/blog/?p=594

おわり

はじめ三角形回をそうと思ったら難しすぎて挫折しました。もう少しレベルアップして再度チャレンジしたいと思います。

POSTED COMMENT

  1. kim99 より:

    贅沢言って なんですけど、 setInterval() 使う必要はなくて、、、、座標変換について解説してほしかった。頭悪いもので、、、、

  2. FGKEN より:

    大変参考にさせて頂きました。
    つきましては最後の青い四角を回転させるコードなのですが、これを指定した画像を回転させるにはどうしたら良いでしょうか。
    お教え頂ければ幸いです。

    • Nakamoto より:

      FGKENさん

      コメントいただきありがとうございます。
      すみません、勉強しようと思っているもののなかなか時間が作れず。
      簡易的な回答になってしまうのですが

      四角形を作成したあたりに以下コードを足すと画像も一応回転します。

      // 画像読み込み
      const chara = new Image();
      chara.src = “https://picsum.photos/id/1021/200/200”; // 画像のURLまたはパスを指定
      ctx.drawImage(chara, 0, 0, 150, 150);

      調べるといろいろかっこいい方法もあって興味深いですね。
      自分の理解が追いつかないので取り急ぎ参考リンク貼っておきます。
      https://stackoverflow.com/questions/17411991/html5-canvas-rotate-image

COMMENT

メールアドレスが公開されることはありません。 が付いている欄は必須項目です