その20～

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

今回試すサンプルは「図形-中級(Figure)」の「多角形を描画しよう(塗りつぶし描画)」です。
怒涛のサンプルの勉強も1/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.fillPolygon(50, 50, 32, 5);
canvas.fillPolygon(100, 100, 32, 6);
canvas.fillPolygon(150, 150, 32, 8);
});

今回勉強するのは17～19行目です。 やっていることは全て同じですので特に複雑ということはありませんよ。
「 .fillPolygon() 」というメソッドで多角形を描画します。

ちょっと脱線…
今まで（）内の数値を普通に数値と言ってきましたが、言葉としてメソッドだとかは使っているのに何故それだけ数値？と自分で疑問に思ったので今回からパラメータと言いますね。
座標だとかメソッドに対して渡す数値をパラメータと言います。

パラメータは順番に（多角形の中心のX座標,　多角形の中心のY座標,　半径,　頂点の数）です。
「 頂点の数 」以外のパラメータは今までのサンプルを勉強していればわかりますよね？
「 頂点の数 」とは「 多角形の角の数 」と思って下さい。 3とすれば三角形、8とすれば八角形という具合です。
何故にこの言葉としたのかは後のサンプルに関係するのでそのまま理解してください。 そんなに難しい言葉ではないと思いますしね。

言葉という意味では、サンプルでは4つのパラメータを設定していますが、ドキュメントを読むと「 offsetAngle : Object 」という5番目のパラメータも指定出来るようになっています。
直訳するとオフセット角度となりますが、個人的にオフセットという言葉にピンと来なかったので「傾き」と認識しています。
この傾きは原点からの角度を度数法( 0～360度 )で指定すれば時計回りに傾きます。
90と指定すれば時計回りに90度に、200とすれば200度に。
原点の位置を 図表してみました。
傾きのパラメータを指定しないと綺麗に見えるように調整してくれていますので、そこが原点だと勘違いしないようにしてくださいね。
指定しないのと0度と指定するのは違うものということです。

Tweet