その59。
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.drawLine(50, 50, 400, 50);
// ラインの幅を変更
canvas.lineWidth = 8;
canvas.drawLine(50, 100, 400, 100);
// ラインの幅を変更
canvas.lineWidth = 16;
canvas.drawLine(50, 150, 400, 150);
// ラインの幅を変更
canvas.lineWidth = 32;
canvas.drawLine(50, 200, 400, 200);
};
今回勉強するのは15～28行目になります。
その8で勉強した「 drawLine 」の応用編と言った感じでしょうか。
プロパティのような気もしますが違うような気もします。
カテゴリ名としては「 ラインスタイル(Line Style) 」ですので線の装飾ということですね。
15～16行目
コメントでデフォルトとある通リ、線を描画するとデフォルトの線幅が適用されます。
デフォルトは「 1 」です。
「 0 」を指定しても無視されて「 1 」が適用されます。
見えない線を指定したい場合は透明度で調整したほうがいいようです。。
18～20行目
19行目の「 canvas.lineWidth = 8; 」で線幅を「 8 」に指示しています。
20行目は線描画の指示は変わりませんが、19行目の指示に従った線幅で描画されていますよね。
22～24、26～28行目
18～20行目と同じように指示しています。
違うのは線幅の値です。
「 16 」と「 32 」が変わった値です。
ですのでサンプルのように上から順に線幅が太くなっているのが確認できます。
ふと
「 canvas.drawLine(50, 50, 400, 50 10); 」
のようにパラメータの最後に線幅を指示すると1行省けるんじゃないかなとも思ったのですが、HTML5に準拠しているのを失念していました。
気になる方はcanvasのプロパティに「 lineWidth 」があるので調べてみて下さい。
