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