HTML黑客帝国数据瀑布流

来源：互联网发布：丅vb晚上7点播出剧集编辑：程序博客网时间：2024/06/07 09:29

代码如下：

<!DOCTYPE html><html lang="zh-cn"><head><meta charset="UTF-8"><title>黑客帝国数据瀑布</title><style>body{margin:0px;}#canvas{display:block;}</style></head><body><canvas id="canvas"></canvas><script>var maxHeight=0;//窗口高度var maxWidth=0;//窗口宽度var canvas=null;//定义画布var arrMess=new Array(256);//生成256列数据/*定义逻辑方法*/function $_id(id){return document.getElementById(id);}function random(min,max){return (Math.random() * (max - min + 1) | 0) + min;}/*立即执行函数初始化数据*/(function(){maxWidth=window.innerWidth;maxHeight=window.innerHeight;var canvasEle=$_id("canvas");canvasEle.width=maxWidth;canvasEle.height=maxHeight;canvas=canvasEle.getContext('2d');var i=arrMess.length;while(i--){arrMess[i]=random(-500,0);}})();/*进行画布绘画*/function draw(){canvas.fillStyle="rgba(0,0,0,0.05)";canvas.fillRect(0,0,maxWidth,maxHeight);arrMess.forEach(function(value,index){var x=index * 10;var text=String.fromCharCode(random(97,122));canvas.fillStyle=getColor();canvas.fillText(text,x,value);arrMess[index]=value>(758 + Math.random()*484) ? 0 : value+10;});}/*定时器刷新*/setInterval(draw,60);/*获取随机颜色*/function getColor(){return "#"+(function(color){return new Array(7 - color.length).join(0) + color;})((Math.random() * 0x1000000 | 0).toString(16));}</script></body></html>

效果图如下：

阅读全文

0 0