その22。
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.fillStar(50, 50, 32, 5);
canvas.fillStar(100, 100, 32, 6);
canvas.fillStar(150, 150, 32, 8, 0.75);
});
今回勉強するのは16～18行目です。 基本的にはその20で勉強した多角形の描画と同じです。
「 fillStar() 」で星型の塗りつぶしが描画されます。
パラメータは順番に（中心のX座標、 中心のY座標、 半径、 頂点の数、 頂点間の凹み量）です。
ドキュメントには「 fillStar() 」の項目がありませんでしたが、tmlib.jsのライブラリ内部にはその20、その21で登場した「 傾き 」が存在するようです。
傾きに関しては多角形の時と同じように原点からの角度を度数法( 0～360度 )で指定すれば時計回りに傾きます。
「 頂点間の凹み量 」ですが、頂点間というのは頂点と頂点の間に凹んでる部分のことを指します。
その凹んでいる部分をどの程度凹ませるかというのがこのパラメータになります。
星型の中心を原点とし、頂点までの距離を「 1 」として設定します。 「 0.5 」とすれば中心と頂点の中間まで凹ませるということになります。
ただし、「 0 」もしくは指定なしとしますとデフォルト値が自動補完されますのでご注意下さい。ちなみに「 0.38 」です。
図表してみました。
