「tmlib.js 怒濤の 100 サンプル!!」を試す その26

その26。

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.fillLines(50, 50, 100, 200, 150, 50, 200, 250, 250, 300);
});

今回勉強するのは16行目です。「 fillLines() 」で形を描画をしています。
形を描画しているのに「 ラインズ 」とあり、ピンと来ない方もいるかと思います。
Illustratorを使用している方ですとイメージしやすいのですがペンツールに塗りを指定して形を描いている状態だと思って下さい。
言葉で表現するならば、「 点と点を線で結んで線で囲まれた内側を塗りつぶし 」ている感じですね。
もっと簡単に言うならば「 自由な形の多角形を描画している 」かな?

パラメータとしてはそれぞれの点のXとY座標を指定するだけです。 多角形ですから頂点が2つ以下だと描画されません。
八角形までは確認しましたが最大数は試していないのですが10や20指定しても問題ない気がします。
頂点の数を増やすと正円に近づきますのでそこはお好みに合わせて使ってみて下さい。

多角形と表現しましたが実は正しくありません。
頂点の座標を右回り、左回りどちらでもいいのですが順番にパラメータに指定することで多角形が出来るのですがサンプルを見て下さい。
バラバラですよね?このメソッドの肝は恐らくココです。
バラバラに指定しても線同士で囲まれた範囲は塗りつぶされていますよね?
「 点と点を線で結んで線で囲まれた内側を塗りつぶし 」と表現した意味がわかって頂けたでしょうか? ちなみに始点から終点への線は自動で結んでくれます。
図表しましたので確認してみてください。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です