HTML5 CanvasとJavaScriptで数字を垂直方向に落下させたい〜勉強会「映画とJS」より
目次
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>
画像にするとこんなかんじです。何も表示されず、「シーン」という音が聞こえてきそうです(泣。
“1”が数珠つなぎに表示されるプログラミングコード
上記のコードで62行目の、”n.clear();”をコメントアウトすると、数字が垂直方向に表示されていきます。ただし、先に表示された数字が削除されず、残っていきます。これぞまさしく「数珠つなぎ」(泣。
次回の「映画とJS」では「パラパラ漫画」のように、数字があたかも落下しているかのように表示させたいものです。関係者のみなさま、ありがとうございました。
追記(2015/11/22)
この記事を公開したところ、読者の方からアドバイスをいただき、数字を落下させることができました。数字の描画メソッドのところに、”fillStyle”で色を指定する必要があったようです。
// 数字の描画 this.draw = function() { ctx.font = '20px Verdana'; // 追加 ctx.fillStyle = '#000000'; ctx.fillText('1', this.x, this.y); }
こうすると、数字の”1″があたかも垂直に落下しているように見えます。
助かりました、ありがとうございます!
〔参考サイト〕