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

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

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

canvasで描画してみる！Javascript超初心者の勉強 HTML5では図形などを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については以下で詳しく解説しています。

setInterval()を使って時間で制御してみる！Javascript超初心者の勉強 setInterval()を使ってcanvasで作成した図形を動かしたかったのですが、いきなりやるには難易度が高かったのでsetInt...

それでは本題です。

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

おわり

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