その72。
tmlib.js 怒濤の 100 サンプル!! – Graphics(HTML5 Canvas) 編
今回試すサンプルは「変形」の「scale を使って拡縮変形させよう」です。
ではサンプルが掲載されているのでまずは見てみましょう。
中央のボタンを押してみて下さい。
横に間延びしたの赤い楕円が描画されたと思います。
/*
* 定数
*/
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.scale(2, 1);
canvas.fillCircle(0, 0, 100);
};
今回勉強するのは18行目になります。
scale(X, Y)で図形の拡大率を指示することができます。
物差しのことをスケールと言ったりしますよね。
目盛や尺度なんて意味もある英単語ですから比較的わかりやすいです。
18行目
scale(X, Y)のパラメータで「 X 」はX軸方向へ「 Y 」はY軸方向への拡大率を指示します。
元の大きさを「 1 」とし、2と指示すると2倍の大きさに0.5と指示すると半分の大きさになります。
1.8なんて指示することもできます。
あくまでこのパラメータは元の大きさを基準としますので拡大率が大きければ図形も大きいとは限りません。
サンプルですとX方向に2倍、Y方向に1倍(元の大きさ)を指示していますので横にだけ間延びした楕円が描画されたということになります。
キノコを食べると大きくなる配管工を表現したりするのに使えそうだなぁとも思います。
