その21。
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.strokePolygon(50, 50, 32, 5);
canvas.strokePolygon(100, 100, 32, 6);
canvas.strokePolygon(150, 150, 32, 8);
});
今回勉強するのは17～19行目です。
その20で勉強した多角形の描画と同じですね。
円や四角形の時にもあった塗りつぶしと線(ストローク)のみの違いです。
「 fill 」が塗りつぶしで、「 stroke 」が線(ストローク)ということになります。
「 fill 」でも「 stroke 」でもないものがその19のサンプルにちょこっと出てきました。
「 rect() 」というメソッドです。
今回で言えば「 polygon() 」ですが、これらはパスを描画するメソッドとなります。
パスについては今回は詳細を省きます。
現段階では、形を描画するものには「塗りつぶし」、「線(ストローク)」、「パス」の3つがあると覚えておけばいいと思います。
