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

その61。

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();

// 幅を設定
canvas.lineWidth = 8;

// デフォルト
canvas.strokeLines(75, 200, 100, 150, 125, 200);

// round
canvas.lineJoin = "round";
canvas.strokeLines(150, 200, 175, 150, 200, 200);

// bevel
canvas.lineJoin = "bevel";
canvas.strokeLines(225, 200, 250, 150, 275, 200);

// miter
canvas.lineJoin = "miter";
canvas.strokeLines(300, 200, 325, 150, 350, 200);

// ガイドラインを描画
canvas.lineWidth = 1;
canvas.strokeStyle = "rgba(255, 0, 0, 0.75)";
canvas.drawLine(50, 150, 375, 150);
};

今回勉強するのは19~32行目になります。
これもその27で勉強した「 strokeLines 」の応用編です。
lineJoin 」直訳すると「 線の結合 」ですね。
線と線の接続部分を装飾する方法を指定します。
接続と言っても1本の線では?と思うかも知れませんがその27をもう一度思い出してください。
strokeLines() 」のことを「 連続する線 」と表現しました。
サンプルでは2本の線を1行で指示しているということになります。
ですので線が折れている部分が接続部分ということです。

19~20行目

コメントでデフォルトとある通リ、線を描画するとデフォルトの設定が適用されます。
デフォルトは「 miter” 」でお互いの線の外側を延長し交点を先端とするプロパティです。
言葉では物凄くわかりづらいので最後に図表します。

22~24行目

23行目で「 “round” 」が指示されています。
線の交点を中心とした円で接続部分を装飾します。
これも最後に図表します。

26~28行目

27行目で「 “bevel” 」が指示されています。
線の外側を水平に結び平らにします。
これも最後に図表します。

30~32行目

31行目で「 “miter” 」が指示されています。
デフォルトの値ですので19~20行目で説明したものと同じです。
サンプルの最初と最後が同じ接続スタイルになっていますね。

34~37行目

ガイドラインを引くコードですね。
以前勉強した内容ですので簡単に説明しますと、
線幅と色を決め、線を引く座標を指示しています。

図表してみました。


コメントを残す

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