その8っ。

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

今回から「図形-初級(Figure)」の「直線を描画しよう」です。
サンプルが掲載されているのでまずは見てみましょう。
中央のボタンを押してみて下さい。
右下がりな線が1本描画されたと思います。 ただの1本の線ですが実は…ただの線です。

/*
* 定数
*/
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(100, 100, 300, 200);
});

今回勉強するところは20行目ですね。 「変数canvas」に対して「.drawLine()」というメソッドで線を描画しています。 「.drawLine(100, 100, 300, 200)」の数値ですが、前半2個の100という数値はA地点のX座標とY座標です。 後半の300と200はB地点のX座標とY座標になります。 図表で表してみました。

絶対位置で座標位置を指定するということさえ覚えておけばdrawLineは英語の意味そのものですから簡単ですね。

Tweet