その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つがあると覚えておけばいいと思います。