超簡単♪ tmlib.js の Canvas クラスを使って様々な図形を描画しよう!!

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

今回は tmlib.js を使って様々な図形を描画する方法について紹介します.

tmlib.js ってなんぞや?って方は『JavaScript ライブラリ 『tmlib.js』と 10 個のサンプルを公開しました.』へ.

GitHub Docs

tmlib.js は標準の HTML5 Canvas をラップして機能を拡張しているので 様々な図形を簡単に描画することができます.

単純な図形描画の他にもグラデーションをかけたり, フィルターをかけたり 画像として保存したりってことも簡単にできるのでぜひ使ってみて下さい.

もちろんサンプルは jsdo.it で作成しています. なので, 実際に動かしたり fork してコードをイジったりしてもらえると嬉しいです.

Table of contents

サンプル & コード

サンプルはこちら

Demo

コードはこちら

<canvas id='world'></canvas>

▲index.html

/*
 * メイン処理(ページ読み込み後に実行される)
 */
tm.main(function() {
    // アプリケーション作成
    var canvas = tm.graphics.Canvas("#world");
    // ウィンドウのサイズにリサイズ
    canvas.resizeWindow();
    // 画面全体をクリア
    canvas.clearColor("black");
    
    // 四角形
    canvas.fillStyle = "red";
    canvas.fillRect(20, 100, 100, 100);
    canvas.strokeStyle = "red";
    canvas.strokeRect(20, 240, 100, 100);
    
    // 三角形
    canvas.fillStyle = "green";
    canvas.fillPolygon(180, 150, 50, 3);
    canvas.strokeStyle = "green";
    canvas.strokePolygon(180, 290, 50, 3);
    
    // 円
    canvas.fillStyle = "blue";
    canvas.fillCircle(290, 150, 50);
    canvas.strokeStyle = "blue";
    canvas.strokeCircle(290, 290, 50);
    
    // 星
    canvas.fillStyle = "yellow";
    canvas.fillStar(400, 150, 50, 5);
    canvas.strokeStyle = "yellow";
    canvas.strokeStar(400, 290, 50, 5);
});

▲script.js

up

解説

上記のコードについて解説していきます.

まず下記のコード

    // アプリケーション作成
    var canvas = tm.graphics.Canvas("#world");

これはまず tm.graphics にある Canvas クラスを生成しています. tmlib.js のクラスは生成時に new を付ける必要がないのでそのまま生成できます.

生成時に指定する引数は Canvas 要素へのクエリパスです. jQuery と同じですね.

次に canvas のサイズ変更と画面全体のクリアを行います.

    // ウィンドウのサイズにリサイズ
    canvas.resizeWindow();
    // 画面全体をクリア
    canvas.clearColor("black");

これで描画までの準備完了です.

ではさっそく描画!

四角形描画

四角形描画は HTML5 Canvas で実装されている標準のメソッドと 同じです.

// 塗りつぶし描画
canvas.fillRect(x, y, width, height);
// ストローク描画
canvas.strokeRect(x, y, width, height);
引数 説明
x x 座標値を指定します
y y 座標値を指定します
width 幅を指定します
height 高さを指定します

三角形描画

三角形を描画するには polygon 系のメソッドを使います. 塗りつぶし描画には fillPolygon, ストローク描画には strokePolygon を使用します.

// 塗りつぶし描画
canvas.fillPolygon( x, y, radius, sides, offsetAngle )
// ストローク描画
canvas.strokePolygon( x, y, radius, sides, offsetAngle )
引数 説明
x x 座標値を指定します
y y 座標値を指定します
radius 半径を指定します
sides 辺の数を指定します
offsetAngle 回転角度を指定します

今回のサンプルでは sides に 3 を指定しているので三角形が表示されていますが, 数値を増やせば多角形も簡単に描画できます.

円描画

円を描画するには circle 系のメソッドを使います. 塗りつぶし描画には fillCircle, ストローク描画には strokeCircle を使用します.

// 塗りつぶし描画
canvas.fillCircle( x, y, radius )
// ストローク描画
canvas.strokeCircle( x, y, radius )
引数 説明
x x 座標値を指定します
y y 座標値を指定します
radius 半径を指定します

スター描画

スターを描画するには star 系のメソッドを使います. 塗りつぶし描画には fillStar, ストローク描画には strokeStar を使用します.

// 塗りつぶし描画
canvas.fillStar( x, y, radius, sides, sideIndent, offsetAngle )
// ストローク描画
canvas.starStar( x, y, radius, sides, sideIndent, offsetAngle )
引数 説明
x x 座標値を指定します
y y 座標値を指定します
radius 半径を指定します
sides 辺の数を指定します
sideIndent 内側に凹む率を指定します
offsetAngle 回転角度を指定します

Photonshop の star 描画に似せてあります. 指定するパラメータは polygon と似ていますが, 内側の凹み率を指定する sideIndent があります.

up

魔法陣描画

以前『JavaScript ライブラリ「tmlib.js」魔法陣サンプルの色違いを色々と作ってみた』で紹介しましたが, 実はこの魔方陣も tmlib.js の Canvas クラスを使って描画しています.

画像を使わなくても Canvas クラスを上手く使うことでこういった複雑な図形も簡単に 描画することができます.

        var canvas = this.canvas;
        var hue    = tm.util.Random.randint(0, 360);
        var hsl    = "hsl({0}, 75%, 50%)".format(hue);
        
        canvas.setTransformCenter();
        canvas.fillStyle  = hsl;
        canvas.strokeStyle= hsl;
        // 星
        canvas.lineWidth = 2;
        canvas.strokeStar(0, 0, this.radius, 5);
        canvas.lineWidth = 1;
        // 5角形
        canvas.strokePolygon(0, 0, this.radius, 5);
        // 円
        canvas.strokeCircle(0, 0, this.radius);
        // 内側の円
        canvas.strokeCircle(0, 0, this.radius*0.8);
        canvas.lineWidth = 4;
        // 外側の円
        canvas.strokeCircle(0, 0, this.radius*1.35);
        
        var text = "Time is money. Time is money. Time";
        canvas.lineWidth = 1;
        for (var i=0,len=text.length; i&gt;len; ++i) {
            canvas.save();
            canvas.rotate(Math.degToRad(i*10));
            canvas.translate(0, -this.radius*1.1);
            canvas.fillText(text[i], 0, 0);
            canvas.restore();
        }

▲魔法陣サンプルの描画部分

up

その他機能

今回紹介したのは tmlib.js のごくごく一部の機能です.

絵を書いたり』,『 フィルターをかけたり』, 『iPhone 用のアイコンを作ったり』 なんてこともできます. こういった機能についてもどんどんサンプルを作って 紹介していきたいと思います.

今後とも tmlib.js をよろしくお願いしますm(>_<)m

up

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT