その24。

tmlib.js 怒濤の 100 サンプル!! – Graphics(HTML5 Canvas) 編

今回試すサンプルは「図形-中級(Figure)」の「点線を描画しよう」です。
ではサンプルが掲載されているのでまずは見てみましょう。
中央のボタンを押してみて下さい。

右下がりの点線が3本描画されたと思います。

/*
* 定数
*/
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.drawDashLine(50, 50, 300, 200);
canvas.drawDashLine(50, 100, 300, 250, 0xff00);
canvas.drawDashLine(50, 150, 300, 300, 0x8000);
});

今回勉強するのは16～18行目です。「 drawDashLine() 」で点線を描画をしています。
点線のパラメータはその8で勉強した直線の描画が基本となっています。
A地点のX座標とY座標、B地点のX座標とY座標を指定するだけでデフォルトの点線パターンが補完してくれます。
サンプルの一番上の点線がデフォルトです。

5番目のパラメータで点線パターンを指定するとサンプルの真ん中、下のような点線を描画することが出来ます。
「 0xff00 」「 0x8000 」となっているところがそうですね。
この指定方法に馴染みがない方が多いかと思いますが、「 16進数 」で指定しています。
簡単に言ってしまえば16まで数えたら一桁上がるということです。普段使っているのは「 10進数 」です。
詳しく知りたい方はこちらのサイトがわかりやすいかもです。

細かく見ていくと、「 0x 」というのは以下の数値は16進数で記述しますよという記号で数字のゼロとアルファベットのエックスです。
「 0x 」に続く数値が16進数ということになります。基本的には6桁で指定しますがサンプルのように省略することも可能です。

ここまではコード眺めたり弄ったりしてわかったのですが、どういう指定をするとどのようなパターンになると説明出来るほど理解できなかったので申し訳ないですが省かせてもらいます。
16進数の数値をいじって好みの点線パターンを探して下さい。

何となくはわかってるような感じで物凄くモヤモヤしてますが・・・

Tweet