その60。

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 = 16;

// デフォルト
canvas.drawLine(50, 50, 400, 50);

// ラインの幅を変更
canvas.lineCap = "butt";
canvas.drawLine(50, 100, 400, 100);

// ラインの幅を変更
canvas.lineCap = "round";
canvas.drawLine(50, 150, 400, 150);

// ラインの幅を変更
canvas.lineCap = "square";
canvas.drawLine(50, 200, 400, 200);

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

今回勉強するのは19～32行目になります。
これもその8で勉強した「 drawLine 」の応用編です。
「 lineCap 」直訳すると「 線の蓋 」ですね。
線の終端に蓋をするような装飾方法を指定します。

19～20行目

コメントでデフォルトとある通リ、線を描画するとデフォルトの設定が適用されます。
デフォルトは「 butt 」で何もしていないように見える装飾方法です。
「 drawLine() 」で指示したA,Bそれぞれの座標結ぶ普通の線になります。

22～24行目

19～20行目で説明した「 butt 」が改めて指示されています。
デフォルトと指示した場合との違いがないことが確認できますよね。

26～28行目

27行目で「 “round” 」が指示されています。
これは線の終端に半円で蓋をするプロパティです。
「 drawLine() 」で指定した線に蓋をするので蓋の分だけ線が長くなります。
サンプルで赤線より外側の描画されている部分が「 lineCap 」で蓋をしたものになります。
線幅に合わせて蓋(半円)も大きくなるので長さが変わりますので注意して下さい。

30～32行目

31行目で「 “square” 」が指示されています。
これは半矩形で蓋をするプロパティです。
半矩形と言ってもわかりづらいですね。
線幅と同じ長さで正方形を作りそれを縦半分にしたものです。
これも線に蓋をするので半矩形の分だけ線の長さが長くなります。
「 “round” 」と同じで線幅が変わると蓋(半矩形)も長くなりますよ。

34～39行目

ガイドラインを引くコードですね。
赤線で縦に2本あるのがここのコードです。
以前勉強した内容ですので簡単に説明しますと、
線幅と色を決め、それぞれ線を引く座標を指示しています。

まとめるとこんな感じです。

Tweet