32行代码生成网页版黑客帝国代码雨使用html5canvas生成白头绿字的竖立下滑的几条字符串,基本思路就是setInterval中不停增加其postition的top属性，就这么简单，就这么传奇，也这么炫耀！<!doctyp。
使用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 ></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() * 115); };Data.prototype.update = function() { this.y= dataSize; if(this.y >= heightthis.historySizeMax * dataSize) { datarray.splice(datarray.indexOf(this), 1); putData(); }this.history.unshift(String.fromCharCode(60Math.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这样换行排版才是真正的人性化……
