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

その63。

tmlib.js 怒濤の 100 サンプル!! – Graphics(HTML5 Canvas) 編

今回試すサンプルは「ラインスタイル(Line Style)の「ラインスタイルを一括で指定しよう」です。
ではサンプルが掲載されているのでまずは見てみましょう。
中央のボタンを押してみて下さい。
先端、接続スタイルが丸味を帯びているジグザグな線が描画されたと思います。

/*
* 定数
*/
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();

// ラインスタイルを一括指定(width, cap, join, miter)
canvas.setLineStyle(16, "round", "round", 10);

// デフォルト(10)
canvas.strokeLines(50, 50, 250, 120, 70, 160, 280, 220);
};

今回勉強するのは16行目になります。
今まで勉強したラインスタイルの設定を1行でやってしまうものになります。

16行目

setLineStyle(width, cap, join, miter) 」で行います。
パラメータは順番に「 線幅、先端、接続スタイル、マイター限界値 」となります。
サンプルでいいますと、

線幅 lineWidth 16
先端 lineCap round (半円で蓋)
接続スタイル lineJoin round (円で線の結合)
マイター限界値 miterLimit 10

最初に初期設定として一括で指示し、処理に合わせて個別に変更するということも出来そうです。
逆に個別に変更したものを一括で初期設定にするというように幅を広げることが出来ますね。


コメントを残す

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