その17っす。

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

今回試すサンプルは「図形-初級(Figure)」の「点を描画しよう」です。
ではサンプルが掲載されているのでまずは見てみましょう。
中央のボタンを押してみて下さい。
小さい点が5つほど描画されたと思います。

/*
* 定数
*/
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.drawPoint(100, 100);
canvas.drawPoint(320, 100);
canvas.drawPoint(320, 200);
canvas.drawPoint(200, 200);
canvas.drawPoint(200, 400);
});

今回勉強するところは17～21行目です。 「変数canvas」に対して「.drawPoint() 」というメソッドで点を描画しています。
単純な点なのでX座標とY座標それぞれ指定すればいいということになります。
直線や三角形を勉強したあとですと簡単に感じますね。
怒涛のサンプルは徐々に難しく設定？されているようなので気を抜くと（´Д｀）こんな感じになるかもしれません…

Tweet