その70。
tmlib.js 怒濤の 100 サンプル!! – Graphics(HTML5 Canvas) 編
今回試すサンプルは「変形」の「translate を使って移動変形させよう」です。
ではサンプルが掲載されているのでまずは見てみましょう。
中央のボタンを押してみて下さい。
中央よりちょっとズレた赤円が描画されたと思います。
/*
* 定数
*/
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.fillCircle(0, 0, 100);
};
今回勉強するのは18行目になります。
17行目
translate(X, Y)で描画する図形を相対距離で移動させることができます。
パラメータの「 X 」と「 Y 」はそれぞれの移動距離を指示します。
サンプルですと19行目で座標(0,0)の位置に円を描画していますのでその位置からX方向に200、Y方向に200移動します。
18行目はそのままで19行目の円の座標だけを変更すると描画される位置が変わりますので試してみて下さい。
translate(X,Y)では移動量を指示することが出来るという認識でいいかなと思っています。
クリックされたらランダム方向に移動するとか応用が出来そうですね。
