【11:Ramdom Words(Canvas)】ランダムな位置やスタイルで文字を描画する
プロジェクトNo.11:Ramdom Words(Canvas)
HTML5のCanvasを使って文字を描画してみた。
更新する度に位置やスタイルが変わります。
なんかに似てると思ったらビッ○カメラの袋か・・・
基本的なCanvasの使い方
CanvasはHTML5の機能の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回) - プログラミングならドットインストール