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