今天發現CSDN上有一個一篇文章"很炫的HTML5 Matrix效果".打開來看，demo演示地址.建議用Chrome打開。
效果如下:
實現代碼（我在代碼裏面嵌入註釋，這樣比較好讀懂）：
<script>
var s = window.screen;
//得到瀏覽器寬度和高度大小,還有設置canvas大小。
var width = q.width = s.width;
var height = q.height = s.height;
//Array(256) 相當於new Array(256),也相當於 [256].JavaScript Object實例化可以省略"new"
//join(1),是給數組每個元素插入"1"返回一個字符串 Array(256).join(1)輸出爲"1111111111111..111",256個1
//split('')把字符串按字符分隔成數組. letters是256個元素爲"1"的數組。
//從後面代碼我們知道，字符寬度爲10,且letters會展示在一行。256*10=2560.屏幕需要2560寬度纔會展示完所有的字符
//好的方式是這樣的 var letters = Array(width/10+1).join(1).split('');
var letters = Array(256).join(1).split('');
var draw = function () {
//.05相當於0.05,是透明度。每一次調用draw都會重畫全屏幕，重畫次數多了，透明度值越來越高,直到就會全屏黑色
//每次畫全屏都會蓋在先前的文字上，先前出來的文字會越來越模糊。
q.getContext('2d').fillStyle='rgba(0,0,0,.05)';
q.getContext('2d').fillRect(0,0,width,height);
//文字的顏色爲綠
q.getContext('2d').fillStyle='#0F0';
//JavaScript Array map方法,y_pos是值，index是數組下標
letters.map(function(y_pos, index){
//fromCharCode() 可接受一個指定的 Unicode 值，然後返回一個字符串。
text = String.fromCharCode(3e4+Math.random()*33);
//字符寬度爲10
x_pos = index * 10;
//y_pos爲字符，這裏自動轉化爲Number
q.getContext('2d').fillText(text, x_pos, y_pos);
//整個demo的精髓所在
//letters裏面每個字符畫的位置相對於上次下降10.下降位置到一定位置會返回到0.
//而這個一定位置爲"758 + Math.random() * 1e4",隨機的。
//所以我們可以看到效果，當字符串第一次到底端的時候，就會有字符先後回到0。參差不齊的下降效果。
//當然這不是真正的下降效果，只是在上次畫的基礎上下面的位置畫面已。仔細看沒有掉的感覺。
//這裏還有Demo的bug.y_pos是字符串。"1"+10="110".
//這樣就導致y_pos依次等於"1","110","11010","0","10"......
//應該改爲parseInt(y_pos)+10
letters[index] = (y_pos > 758 + Math.random() * 1e4) ? 0 : y_pos + 10;
});
};
//每隔33秒畫一次
setInterval(draw, 33);
</script>其實代碼draw後,canvas裏面N次fillRect, fillText, 不知道JavaScript 對這個內存怎麼處理。
我改下代碼bug，優化，加上自己的邏輯來實現黑客帝國片頭的Matrix效果。So Cool
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Matrix Canvas</title>
</head>
<body>
<canvas id="q"></canvas>
<script>
var s = window.screen;
var ctx=q.getContext('2d')
var width =q.width= s.width;
var height =q.height= s.height;
var letters = Array(width/10+1).join(1).split('');
var draw = function () {
ctx.fillStyle='rgba(0,0,0,.05)';
ctx.fillRect(0,0,width,height);
ctx.fillStyle='#0F0';
letters.map(function(y_pos, index){
text = String.fromCharCode(48+Math.random()*2);
x_pos = index * 10;
ctx.fillText(text, x_pos, y_pos);
letters[index] = (y_pos > 758 + Math.random() * 1e4) ? 0 : parseInt(y_pos) + 10;
});
};
setInterval(draw, 33);
</script>
</body>
</html>