その5です。

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

今回試すサンプルは「基礎」の中の「幅, 高さを指定しよう」です。
サンプルが掲載されているのでまずは見てみましょう。
中央のボタンを押してみて下さい。

前回と同じくサンプル画面のいっぱいに黒色で塗りつぶされたと思います。

tm.main(function() {
// canvas インスタンス生成
var canvas = tm.graphics.Canvas("#world");

// 幅, 高さを指定
canvas.resize(465, 465);

// 背景色を指定
canvas.clearColor("black");
});

今回勉強するのは6行目です。

3行目で取得した「変数canvas」に対して「resize」というメソッドで幅と高さを465pxに指定しています。
「.resize(幅,  高さ)」の順ですので「.resize(400, 100)」と指定すれば横長になります。
縦長にしたい場合は2番目の数値を大きくしてください。

Tweet