【サンプルコード】JavaScriptでMatrix風の「text rain」を描画

2020年4月6日システムJavaScript,プログラミング初心者

【サンプルコード】JavaScriptでMatrix風の「text rain」を描画
【サンプルコード】JavaScriptでMatrix風の「text rain」を描画

どうも、UT(@ut_1029)です。

JavaScriptで映画マトリックス風のtext rainをこちら「javascriptでMatrix text rain作ってみた」の記事を参考に実装しました。

HTML5canvasタグJavaScriptを利用してマトリックス風のtext rainを描画しています。

JavaScriptでプログラミング〜Matrix風の「text rain」〜

JavaScriptでMatrix風の"text rain"を描画するサンプルコード

JavaScriptでMatrix風の"text rain"を描画するサンプルコード
JavaScriptでMatrix風の"text rain"を描画するサンプルコード

JavaScriptHTML5canvasタグでマトリックス風の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タグを用意します。ここへJavaScripttext rainを描画するようにします。

<canvas id="textrain"></canvas>

JavaScript部分

次にJavaScript部分の解説をします。

canvasタグ対応ブラウザか判定

HTML5canvasタグ対応のブラウザか判定を行います。昨今のブラウザだと問題ないと思いますが、一応のチェックです。

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 raincanvasタグへ描画する関数を定義します。

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);

おわり

今回はHTML5canvasタグJavaScripttext rainを描画するサンプルコードを紹介しました。

一昔前までは、AdobeFlashでこういった描画処理を行っていましたが、(かなり今更なことですが)現在はHTML5canvasタグJavaScriptで図形などを描画するプログラミングが主流となっています。

HTML5canvasタグを扱うことに慣れておくと実装できるプログラムの幅が増えるので、ぜひ扱えるようになりたい。。。

プログラミング解説講座

UT
UTの日常

当ブログ(UTの日常)を運営しているUTは「プログラミング関係の仕事をしている30代1児の父親」です。詳しくは「UTのプロフィール」をご覧ください。

UTの日常では、システム開発における LinuxPHPJavaScriptJQueryMySQLなどの知識やプログラミング技術、サーバ構築や運用などAWSをメインに知識を紹介しています。

内容としては、Webシステムの開発中や運用中に発生したトラブルやエラーの対応や解決方法をまとめた備忘録やWebシステム開発の方法を未経験者の人を対象に説明したプログラム教科書を記事にしています。
Webシステム開発の知識やプログラム技術の備忘録