黑客炫酷代码（32行代码生成网页版黑客帝国代码雨）
使用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这样换行排版才是真正的人性化……
免责声明：本文仅代表文章作者的个人观点，与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺，请读者仅作参考，并自行核实相关内容。文章投诉邮箱：anhduc.ph@yahoo.com
