【11：Ramdom Words(Canvas)】ランダムな位置やスタイルで文字を描画する

f:id:seintoseiya:20150514195939p:plain
プロジェクトNo.11：Ramdom Words(Canvas)
HTML5のCanvasを使って文字を描画してみた。
更新する度に位置やスタイルが変わります。
なんかに似てると思ったらビッ○カメラの袋か・・・

基本的なCanvasの使い方

CanvasはHTML5の機能の１つで基本的にはjavascriptと組み合わせて図や文字を描画する要素になります。
CSSだけでは表現しきれない図形やjavascriptと組み合わせた動的なオブジェクトを作る事ができます。

使い方は簡単に言うと、
まずはHTMLでcanvas要素にidを付けて、javascriptから要素を読み出し、Canvas用のオブジェクトを生成します。

HTML

<canvas id="mycanvas" width="800" height="600">
	Canvasに対応したブラウザを使って下さい。
</canvas>
<script src='./js/main.js'></script>

JavaScript

//HTMLが完全に読み込み終わってからdraw()を実行する
window.onload = function () {
    draw();
};

function draw () {
    var canvas = document.getElementById('mycanvas');
    if (!canvas || !canvas.getContext) return false;
    var ctx = canvas.getContext('2d');

    //ここからctx（Canvasオブジェクト）に対しての描画処理を書く

Canvasでできる基本的な事

ここでは基本的なものだけ紹介する。

四角形の描画
グラデーション
影
透明度
縮小・拡大
線の描画
曲線の描画
文字の描画
画像の表示
画像をパターン表示
設定の保存、復元
アニメーション

詳しくは参考サイトで。

ランダムな位置やスタイルで文字を描画する

ここからが今回実際に作ってみた内容です。
JavaScriptのランダム関数や配列を除いて、Canvas関数の説明はソース内のコメントの通りです。

JavaScript

    // 任意の文字をランダム描画
    ctx.globalAlpha = 0.5;
    var a = new Array('HTML5','CSS','JavaScript','Web','Canvas');

    for (var i = 0; i < 50; i++) {
        var x = Math.floor(Math.random() * 800);
        var y = Math.floor(Math.random() * 600);
        var r = Math.floor(Math.random() * 60);

        ctx.font = "bold "+r+"px Verdana"; // 文字フォント指定
        ctx.fillStyle = "rgb("+rgb()+","+rgb()+","+rgb()+")"; // 塗りつぶしスタイル指定
        ctx.fillText(a[i%5], x, y, 200); // (文字,始点x,y,最大横幅)に文字を描画
        ctx.strokeText('Canvas', x, y, 200); // 縁取り文字を描画
    }

    function rgb () {
        return Math.floor(Math.random() * 255);
    }