その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と同じ図表を貼っておきます。

Tweet