その27。
tmlib.js 怒濤の 100 サンプル!! – Graphics(HTML5 Canvas) 編
今回試すサンプルは「図形-中級(Figure)」の「ラインズを描画しよう(ストローク描画)」です。
ではサンプルが掲載されているのでまずは見てみましょう。
中央のボタンを押してみて下さい。
上下する1本の線が描画されたと思います。
/*
* 定数
*/
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.strokeLines(50, 50, 100, 200, 150, 50, 200, 250, 250, 300);
});
今回勉強するのは16行目です。「 strokeLines() 」で線のみを描画をしています。
四角形や円形と同じで塗りつぶしか線のみかということなんですが、その26で勉強した「 fillLines() 」が少し特殊というか他の図形描画と癖が違うので同じ仲間である「 strokeLines() 」も癖があります。
ですが、それはライブラリの内部的な所ですのでイメージとしては「 連続する線 」といった感じです。
線で結びたい座標をパラメータに指示するだけで問題ありません。
「 fillLines() 」では始点と終点を自動補完して塗りつぶしてくれましたが、「 strokeLines() 」ではあくまで指示した点を繋ぐのみとなります。
ここは色々説明するよりも実際に触ってみたほうがわかりやすいと思いますので試されて下さい。
fillの部分をstrokeに変えるだけでも雰囲気がわかると思いますので。
