その9っ。

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

今回試すサンプルは「図形-初級(Figure)」の「矩形を描画しよう(塗りつぶし描画)」です。
線に引き続き、矩形の描画です。高校まで矩形を「たんけい」と読んでいました。
友達に教えてもらった時はΣ(ﾟ∀ﾟﾉ)ﾉ こんな感じでした。
ではサンプルが掲載されているのでまずは見てみましょう。
中央のボタンを押してみて下さい。
黒色の長方形が描画されたと思います。

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

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

線の描画と違って相対距離になりますので気をつけて下さい。
なお、右上と左下の座標は自動で補完してくれるので特に気にしなくても大丈夫です。

Tweet