JavaScriptでMatrix風の「text rain」を描画するプログラムを解説
JavaScriptで映画マトリックス風のtext rainをこちら「javascriptでMatrix text rain作ってみた」の記事を参考に実装しました。
HTML5のcanvasタグへJavaScriptを利用してマトリックス風のtext rainを描画しています。
JavaScriptでMatrix風の"text rain"を描画するサンプルコード
JavaScriptとHTML5のcanvasタグでマトリックス風のtext rainを描画するプログラミングコードを紹介します。
<html>
<head>
<title>textrain</title>
<meta charset="UTF-8">
</head>
<body style="margin:0">
<canvas id="textrain"></canvas>
</body>
<script type="text/javascript">
var textrain = document.getElementById('textrain');
if (!textrain) {
alert('canvas非対応ブラウザです。');
}
else {
var width = textrain.width = window.innerWidth;
var height = textrain.height = window.innerHeight;
var records = Array(256);
for (var i = 0; i<records.length; i++) {
records[i] = 1;
}
var texts = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
texts += "abcdefghijklmnopqrstuvwxyz";
texts += "123456789";
texts += "@#$%^&*()*&^%";
var draw = function () {
textrain.getContext('2d').fillStyle = 'rgba(0, 0, 0, 0.05)';
textrain.getContext('2d').fillRect(0, 0, width, height);
textrain.getContext('2d').fillStyle = '#0F0';
textrain.getContext('2d').font = "12px 'Monaco'";
records.map(function(y_pos, index){
var text = texts[Math.floor(Math.random() * texts.length)];
x_pos = index * 10;
textrain.getContext('2d').fillText(text, x_pos, y_pos);
records[index] = (y_pos > 0 + Math.random() * 1e4) ? 0 : y_pos + 10;
console.log(y_pos, index, text);
});
};
setInterval(draw, 300);
}
</script>
</html>JavaScriptでMatrix風の"text rain"を描画するサンプルコードを解説
JavaScriptでMatrix風の"text rain“を描画するサンプルコードを解説します。
HTML部分
まずHTML部分を解説します。っといってもcanvasタグを用意するだけですが(汗)
canvasタグを用意
canvasタグを用意します。ここへJavaScriptでtext rainを描画するようにします。
<canvas id="textrain"></canvas>JavaScript部分
次にJavaScript部分の解説をします。
canvasタグ対応ブラウザか判定
HTML5のcanvasタグ対応のブラウザか判定を行います。昨今のブラウザだと問題ないと思いますが、一応のチェックです。
var textrain = document.getElementById('textrain');
if (!textrain) {
alert('canvas非対応ブラウザです。');
}ブラウザのウィンドウ表示領域を取得
ブラウザの表示幅いっぱいに描画するので、ウィンドウ表示領域値を取得しておきます。
var width = textrain.width = window.innerWidth;
var height = textrain.height = window.innerHeight;横一列に描画するテキストのY座標を配列へ格納
text rainを横一列に描画するので、出力位置のY座標を配列で保持するようにします。ここではY座標を1で初期化して定義します。
var records = Array(256);
for (var i = 0; i<records.length; i++) {
records[i] = 1;
}text rainへ流す文字列達を定義
text rainで流す文字列を定義します。
var texts = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
texts += "abcdefghijklmnopqrstuvwxyz";
texts += "123456789";
texts += "@#$%^&*()*&^%";text rainを描画する関数を定義
text rainをcanvasタグへ描画する関数を定義します。
var draw = function () {
// ～
};canvasタグへ四角形を描画
canvasタグへ半透明の黒い四角形を描画していきます。なぜ四角形を描画するのかというと、時間経過と共に描画したテキストが消えていく演出を行うためです。
つまり半透明の黒い四角形を重ねることで、テキストが消えていくように表現します。
textrain.getContext('2d').fillStyle = 'rgba(0, 0, 0, 0.05)';
textrain.getContext('2d').fillRect(0, 0, width, height);- fillStyle：背景スタイル
- rgba(赤、緑、青、透明度)
- fillRect：四角形を描画
- 第1引数：左上のX座標
- 第2引数：左上のY座標
- 第3引数：幅
- 第4引数：高さ
canvasタグへ描画するテキストのスタイル
canvasタグへテキストを描画する際のスタイルを定義します。
textrain.getContext('2d').fillStyle = '#0F0';
textrain.getContext('2d').font = "12px 'Monaco'";横一列並べて文字列を描画していく
横一列にテキストを描画する処理を定義します。
records.map(function(y_pos, index){
// ～
});- y_pos
- 横一列に描画するテキストのY座標
- index
- 横一列に描画するテキストのインデックス
canvasタグへ描画するテキストをランダムに取得
JavaScriptのランダム関数を使用して、描画するテキストを1文字だけランダムに取得します。
var text = texts[Math.floor(Math.random() * texts.length)];描画するX座標
canvasタグへ描画するテキストのX座標を決めます。10ずつ掛け算して描画するテキストが横一列に描画されるようにしています。
x_pos = index * 10;canvasタグへテキストを描画
canvasタグへテキストを描画します。ここでランダムに取得した1文字を描画します。
textrain.getContext('2d').fillText(text, x_pos, y_pos);- fillText: テキストを描画
- 第1引数：テキスト
- 第2引数：X座標
- 第3引数：Y座標
次に描画するためにY座標を更新
次にテキストを描画する際のY座標を更新します。ここでは下方向へテキストが描画されるように10ずつ加算するようにしています。
records[index] = (y_pos > 0 + Math.random() * 1e4) ? 0 : y_pos + 10;指定ミリ秒間隔でテキスト描画を実行
テキスト描画を行うスピードをミリ秒で指定します。数字が大きくするとテキストが描画される速度が遅くなります。
setInterval(draw, 300);おわり
今回はHTML5のcanvasタグへJavaScriptでtext rainを描画するサンプルコードを紹介しました。
一昔前までは、AdobeのFlashでこういった描画処理を行っていましたが、(かなり今更なことですが)現在はHTML5のcanvasタグへJavaScriptで図形などを描画するプログラミングが主流となっています。
HTML5のcanvasタグを扱うことに慣れておくと実装できるプログラムの幅が増えるので、ぜひ扱えるようになりたい。。。
1985年生まれ1児の父親です。Web系エンジニアを10年以上しています。
→プロフィール
→Amazon欲しいものリスト