その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行目
ガイドラインを引くコードですね。
以前勉強した内容ですので簡単に説明しますと、
線幅と色を決め、線を引く座標を指示しています。
図表してみました。
