使用html5 canvas生成白头绿字的竖立下滑的几条字符串, 基本思路就是setInterval中不停增加其postition的top属性，就这么简单，就这么传奇，也这么炫耀！
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>matrix code rain</title> <style type="text/css"> body { background: #000; overflow:hidden; } </style> </head> <body> <canvas id="matrix"></canvas> <script> var matrix = document.getElementById("matrix"), ctx = matrix.getContext("2d"); var datarray = [], dataSize = 14; var width = ctx.canvas.width = window.innerWidth, height = ctx.canvas.height = window.innerHeight; ctx.font = dataSize "px monospace"; /* Data colum object ============= */ function Data(x) { this.x = x; this.y = 0; this.history = []; this.historySizeMax = Math.floor(Math.random() * 11 5); }; Data.prototype.update = function() { this.y = dataSize; if(this.y >= height this.historySizeMax * dataSize) { datarray.splice(datarray.indexOf(this), 1); putData(); } this.history.unshift(String.fromCharCode(60 Math.floor(Math.random() * 62))); if(this.history.length > this.historySizeMax) this.history.pop(); }; Data.prototype.draw = function() { ctx.fillStyle = "#fff"; ctx.fillText(this.history[0], this.x, this.y); ctx.fillStyle = "#0f0"; for(var i = 1; i < this.history.length; i ) { ctx.fillText(this.history[i], this.x, this.y - i * dataSize); } }; var count = Math.floor(width / dataSize); function putData() { var pos = Math.floor(Math.random() * count) * dataSize; datarray.push(new Data(pos)); } /* Init & loop ============= */ setInterval(function(){ ctx.clearRect(0, 0, width, height); if(datarray.length < 70) putData(); for(var i = 0; i < datarray.length; i ) { datarray[i].update(); datarray[i].draw(); } }, 60); </script> </body> </html>
似乎，js这样换行排版才是真正的人性化……
