「tmlib.js 怒濤の 100 サンプル!!」を試す その71

その71。

tmlib.js 怒濤の 100 サンプル!! – Graphics(HTML5 Canvas) 編

今回試すサンプルは「変形」の「rotate を使って回転変形させよう」です。
ではサンプルが掲載されているのでまずは見てみましょう。
中央のボタンを押してみて下さい。
右下がりの赤い長方形が描画されたと思います。

/*
* 定数
*/
var SCREEN_WIDTH = 465;
var SCREEN_HEIGHT= 465;
tm.main(function() {
// canvas インスタンス生成
var canvas = tm.graphics.Canvas("#world");

// 幅, 高さを指定
canvas.resize(SCREEN_WIDTH, SCREEN_HEIGHT);
// 画面にフィットさせる
canvas.fitWindow();

// 四角形を描画
canvas.fillStyle = "red";
canvas.translate(200, 200);
canvas.rotate(45*Math.PI/180);
canvas.fillRect(0, 0, 200, 100);
};

今回勉強するのは18行目になります。
17行目はその70で勉強した図形を移動させるメソッドでしたね。
忘れた方は確認してください。
復習しないと忘れやすいのは年齢からくるものなのか…

18行目

rotate(rad)で描画する図形を回転させることができます。
パラメータの「 rad 」は多角形や星型の描画の時に勉強した「 傾き 」と似ています。
原点からの角度を度数法から弧度法に計算して指示しています。
弧度法に関してはその13で傾きに関してはその20その22を見てもらうといいかと思います。

ちなみにtmlib.jsでは角度の変換を行うメソッドをMathクラスのなかに持っていますので、サンプルのように計算式そのものでもいいのですが以下のようにすることもできます。

// 度数法から弧度法へ
// 「 deg 」に度数法での角度
canvas.rotate( Math.degToRad( deg ));

度数法から弧度法へは「 Math.degToRad( deg )
逆に弧度法から度数法へは「 Math.radToDeg( rad )
を用いることができます。

ただし、「 rotate(rad) 」メソッドにはパラメータの表記名でもわかるように「 rad(弧度法) 」で値を指示しないといけません。
度数法でもエラーは出ませんが予期しない位置に回転しますので気をつけて下さい。

ちょっとおまけ

サンプルではtranslateで移動させた後に、rotateで回転させています。
逆に回転させて移動させると先のものと描画位置が変わります。
移動させた後に回転するのはXとYの座標200の位置で回転するということです。
回転させて移動するのは矩形の元々の位置はXとYが0ですので、そこで回転したものが移動します。
両方共同じ事を指示していますが、順番が変われば結果が変わることがあるのを覚えておくと後に役立つと思います。


コメントを残す

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