「tmlib.js 怒濤の 100 サンプル!!」を試す その10

その10です。

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

今回試すサンプルは「図形-初級(Figure)」の「矩形を描画しよう(ストローク描画)」です。
前回のその9とさほど変わりません。
ではサンプルが掲載されているのでまずは見てみましょう。
中央のボタンを押してみて下さい。
黒色の長方形の枠線のみ描画されたと思います。

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

今回勉強するところは20行目です。 「変数canvas」に対して「.strokeRect() 」というメソッドで矩形を描画しています。 「.fillRect() 」との違いは塗りつぶしか枠線のみかということです。
厳密には違うのかも知れませんが、今は気にしなくてもいいかなと。
その9を参考にしつつ試してみて下さい。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です