エコテキブログ

  1. TOPTOP
  2. Webサービス
  3. JavaScript

HTML5 CanvasとJavaScriptで数字を垂直方向に落下させたい〜勉強会「映画とJS」より

keyword_plannner0

11月21日（土）に「映画とJS(新しいタブで開く)」に行ってきました。映画のワンシーンをJavascriptで作ってみようという趣旨の勉強会です。今回のテーマは「マトリックスの文字エフェクト」。イメージ的にはこんな感じです。

数字の”1″を垂直に落下させる

といっても自分の実力では、こんな複雑なものは作れません。なので文字エフェクトの機能を削りに削りまくり、ごく単純な仕様にしました。

1.canvas上に数字の"1"を描画する
2."1"は垂直方向に落下する

人が見ている分には、2つの機能しかありません。ですがJavaScript上では以下のように動作させます。

1.canvas上に数字の"1"を描画する
2.数字の"1"が描画されているcanvasに、元の色を上塗りする（つまり数字を見えなくする）
3.垂直方向に一コマ分落下した数字の"1"を描画する
4.数字の"1"が描画されているcanvasに、元の色を上塗りする
(以降、1~4の動作を繰り返し)

“1”が全く表示されないプログラミングコード

そのJavaScriptの動作を考慮したプログラミングコードは、以下のとおりです。ドットインストールの「HTML5でインタラクティブアート(新しいタブで開く)」を参考にさせていただいております。ただし、期待通りの動作はしません。”1″が全く表示されなくて困っています。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>映画とJS</title>
    <style>
        #container {
            text-align: center;
        }
        #mycanvas {
            background: #ecf0f1;
            cursor: crosshair;
        }
    </style>
</head>
<body>
    <div id="container">
        <canvas id="mycanvas" width="750" height="500">
            Canvasに対応したブラウザを用意してください。
        </canvas>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
        var ctx;
        
        var canvas = document.getElementById('mycanvas');
        ctx = canvas.getContext('2d');
        
        // 数字オブジェクトを作成する
        var Number = function(x, y) {
            // 数字の座標の位置
            this.x = 100;
            this.y = 20;
            // 数字の落下速度
            this.vy = 10;
            
            // 数字の描画
            this.draw = function() {
                ctx.font = '20px Verdana';
                ctx.fillText('1', this.x, this.y);
            }
            
            // 数字の落下
            this.move = function() {
                this.y += this.vy;
            }
            
            // キャンバスの初期化
            this.clear = function() {
                ctx.fillStyle = '#ecf0f1';
                ctx.fillRect(0, 0, canvas.width, canvas.height);
            }
                   
        }
        
        // インスタンスの生成
        var n = new Number();

        // 数字の落下関数
        function update() {
            setInterval(function() {
                n.clear();
                n.draw();
                n.move();                   
            }, 1000);           
        }
        
        // 数字の落下開始
        update();
        
    </script>
</body>
</html>

画像にするとこんなかんじです。何も表示されず、「シーン」という音が聞こえてきそうです（泣。

movie_js

“1”が数珠つなぎに表示されるプログラミングコード

上記のコードで62行目の、”n.clear();”をコメントアウトすると、数字が垂直方向に表示されていきます。ただし、先に表示された数字が削除されず、残っていきます。これぞまさしく「数珠つなぎ」（泣。

movie_js2

次回の「映画とJS」では「パラパラ漫画」のように、数字があたかも落下しているかのように表示させたいものです。関係者のみなさま、ありがとうございました。

追記(2015/11/22)

この記事を公開したところ、読者の方からアドバイスをいただき、数字を落下させることができました。数字の描画メソッドのところに、”fillStyle”で色を指定する必要があったようです。

// 数字の描画
this.draw = function() {
  ctx.font = '20px Verdana';
  // 追加
  ctx.fillStyle = '#000000';
  ctx.fillText('1', this.x, this.y);
}

こうすると、数字の”1″があたかも垂直に落下しているように見えます。

movie_js3

助かりました、ありがとうございます！

〔参考サイト〕