早速試していきます。

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

今回試すサンプルは「基礎」の中の「Canvas インスタンスを生成しよう」です。
サンプルが掲載されているのでまずは見てみましょう。
中央のボタンを押してみて下さい。

何も表示されないと思います。
上部の「JavaScript」タブを押してコードを確認してみましょう。
3行目はtmlibを使う上での決まりごとなのでこのまま覚えて下さい。
おまじないというやつですね。
今回覚える所は5行目の部分です。

// forked from phi's "tmlib.js 0.1.3 template" http://jsdo.it/phi/w6VG

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

HTMLコードの「world」というID名が付いた「canvasタグ」を取得して「変数canvas」に代入しています。
情報を取得しているだけなのでサンプルを再生しても何も表示されないわけですね。
違うID名を付けた場合は、変更してください。
tmlib.jsを触っていく基礎となる部分ですので覚えないと始まらない気がします。
とはいえ、今後学習していく過程でコピペで済ませてしまいそうですが…

Tweet