その23。
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.strokeStar(50, 50, 32, 5); canvas.strokeStar(100, 100, 32, 6); canvas.strokeStar(150, 150, 32, 8, 0.75); });
今回勉強するのは16~18行目です。 その22で勉強した星型多角形の描画と同じです。
「 strokeStar() 」で線のみの星型が描画されます。
パラメータは順番に(中心のX座標、 中心のY座標、 半径、 頂点の数、 頂点間の凹み量)です。
「 傾き 」も指定したければ6番目に追加すればOKです。
その22と同じ図表を貼っておきます。