読者です 読者をやめる 読者になる 読者になる

one's way blog

ワクワクを生み出せるWebエンジニアを目指して。

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

one's wayプロジェクト HTML5

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

基本的なCanvasの使い方

CanvasHTML5の機能の1つで基本的には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);
    }

参考サイト

Canvasでできる基本的な事で紹介した機能が、それぞれ3分動画でわかりやすく紹介されてます。
HTML5 Canvas入門 (全17回) - プログラミングならドットインストール

全ソースはこちら

github.com

関連アプリ・書籍

HTML5 & CSS3ステップアップブック

HTML5 & CSS3ステップアップブック