その11になります。
tmlib.js 怒濤の 100 サンプル!! – Graphics(HTML5 Canvas) 編
今回試すサンプルは「図形-初級(Figure)」の「円を描画しよう(塗りつぶし描画)」です。
ではサンプルが掲載されているのでまずは見てみましょう。
中央のボタンを押してみて下さい。
黒色の円が描画されたと思います。
/*
* 定数
*/
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.fillCircle(200, 200, 150);
});
今回勉強するところは20行目です。 「変数canvas」に対して「.fillCircle() 」というメソッドで円を描画しています。
fillCircle(円の中心X座標, 円の中心Y座標, 円の半径)という順番に値を指定します。
円の中心を決めて、大きさを決めるだけですので簡単です。
例えば、fillCircle(-100, -100, 150)とした場合は見切れて表示されることになります。
画面上に表示されていないくてもプログラムの内部的には表示されています。ちょっと覚えておくといいですよ。
