その73。

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

今回試すサンプルは「変形」の「画面の中心に移動変形させよう」です。
ではサンプルが掲載されているのでまずは見てみましょう。
中央のボタンを押してみて下さい。
赤い円が画面中央に描画されたと思います。

/*
* 定数
*/
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.setTransformCenter();
canvas.fillCircle(0, 0, 100);
};

今回勉強するのは17行目になります。

17行目

setTransformCenter()で図形等を画面中央に自動で整列してくれます。
メソッド名がちょっと長いのでスペルのタイプミスさえ気をつければ簡単ですね。
特にパラメータも必要としませんしね。
画面の大きさを定数で決めてはいますが、fitWindow()で解像度そのままにブラウザ等の大きさに合わせるように指示していますので必ず画面中央に描画されます。
試しにjsdo.itからHTMLファイルをダウンロードし直接ブラウザで表示させウィンドウの大きさを変更すると確認できます。

ゲームオーバー表示や街の名前を表示させたりするのに使うかなと思います。
アイデア次第でもっと色々な場所に使えそうですね。

Tweet