史上最最最最炫酷的黑客数据流—男人必备装❌神器 程序员文章站 2022-06-28 18:53:56 下面是具体的源码及其思路思路：下面第一个代码块建议结合自己文件位置直接复制粘贴黑客帝国-代码雨 下面是具体的源码及其思路思路： 下面第一个代码块建议结合自己文件位置直接复制粘贴 <html> <head> <title>黑客帝国-代码雨</title> <canvas id="canvas" style="background:red" width="620" height="340"></canvas> <audio autoplay="autoplay" src="C:\Users\gxkj-040\Desktop\黑客帝国代码雨\Rob Dougan、Don Davis - Chateau.mp3"></audio> <script type="text/javascript"> 怕大家看不明白，注释都写的明明白白滴 window.onload = function(){ //获取图形对象 var canvas = document.getElementById("canvas"); //获取图形的上下文 var context = canvas.getContext("2d"); //获取浏览器屏幕的宽度和高度 var W = window.innerWidth; var H = window.innerHeight; //设置canvas的宽度和高度 canvas.width = W; canvas.height = H; //每个文字的字体大小 var fontSize = 15; //计算列 var colunms = Math.floor(W /fontSize); //记录每列文字的y轴坐标 var drops = []; //给每一个文字初始化一个起始点的位置 for(var i=0;i<colunms;i++){ drops.push(0); } 客官想要啥样的就有啥样的，根据下面的代码可随心所欲的设置数据流属性喔 //运动的文字 var str ="01abcdefghijklmnopqurstuvwxyz"; //4:fillText(str,x,y);原理就是去更改y的坐标位置 //绘画的函数 function draw(){ //让背景逐渐由透明到不透明 context.fillStyle = "rgba(0,0,0,0.05)"; context.fillRect(0,0,W,H); //给字体设置样式 //context.font = "700 "+fontSize+"px 微软雅黑"; context.font = fontSize + 'px arial'; //给字体添加颜色 context.fillStyle ="green";//随意更改字体颜色 //写入图形中 for(var i=0;i<colunms;i++){ var index = Math.floor(Math.random() * str.length); var x = i*fontSize; var y = drops[i] *fontSize; context.fillText(str[index],x,y); //如果要改变时间，肯定就是改变每次他的起点 if(y >= canvas.height && Math.random() > 0.92){ drops[i] = 0; } 嘿嘿嘿差点忘咯，还有咱们下面这个设置其颜色属性呀 drops[i]++; } }; function randColor(){ var r = Math.floor(Math.random() * 256); var g = Math.floor(Math.random() * 256); var b = Math.floor(Math.random() * 256); return "rgb("+r+","+g+","+b+")"; } draw(); setInterval(draw,33); }; 咳咳咳，接下来的代码块就直接ctrl+C+V昂，嘿嘿嘿 </script> <style type="text/css"> body{margin: 0; padding: 0; overflow: hidden;} </style> </head> <body> </body> </html> 咱家下面附上完整代码（小声bb：编写不易，求个不要钱的赞叭） <html> <head> <title>黑客帝国-代码雨</title> <canvas id="canvas" style="background:red" width="620" height="340"></canvas> <audio autoplay="autoplay" src="C:\Users\gxkj-040\Desktop\黑客帝国代码雨\Rob Dougan、Don Davis - Chateau.mp3"></audio> <script type="text/javascript"> window.onload = function(){ //获取图形对象 var canvas = document.getElementById("canvas"); //获取图形的上下文 var context = canvas.getContext("2d"); //获取浏览器屏幕的宽度和高度 var W = window.innerWidth; var H = window.innerHeight; //设置canvas的宽度和高度 canvas.width = W; canvas.height = H; //每个文字的字体大小 var fontSize = 15; //计算列 var colunms = Math.floor(W /fontSize); //记录每列文字的y轴坐标 var drops = []; //给每一个文字初始化一个起始点的位置 for(var i=0;i<colunms;i++){ drops.push(0); } //运动的文字 var str ="01abcdefghijklmnopqurstuvwxyz"; //4:fillText(str,x,y);原理就是去更改y的坐标位置 //绘画的函数 function draw(){ //让背景逐渐由透明到不透明 context.fillStyle = "rgba(0,0,0,0.05)"; context.fillRect(0,0,W,H); //给字体设置样式 //context.font = "700 "+fontSize+"px 微软雅黑"; context.font = fontSize + 'px arial'; //给字体添加颜色 context.fillStyle ="green";//随意更改字体颜色 //写入图形中 for(var i=0;i<colunms;i++){ var index = Math.floor(Math.random() * str.length); var x = i*fontSize; var y = drops[i] *fontSize; context.fillText(str[index],x,y); //如果要改变时间，肯定就是改变每次他的起点 if(y >= canvas.height && Math.random() > 0.92){ drops[i] = 0; } drops[i]++; } }; function randColor(){ var r = Math.floor(Math.random() * 256); var g = Math.floor(Math.random() * 256); var b = Math.floor(Math.random() * 256); return "rgb("+r+","+g+","+b+")"; } draw(); setInterval(draw,33); }; </script> <style type="text/css"> body{margin: 0; padding: 0; overflow: hidden;} </style> </head> <body> </body> </html> 如需转载，请附上本文链接：https://blog.csdn.net/qq_44884421/article/details/107887733 本文地址：https://blog.csdn.net/qq_44884421/article/details/107887733 相关标签： himl html css javascript html5 上一篇： 乾隆执意南巡，是想游山玩水还是效仿康熙？ 下一篇： Vue 各个资源包之间的区别（vue.common.dev.js、vue.runtime.esm.js 等等） 推荐阅读 史上最最最最炫酷的黑客数据流—男人必备装❌神器 史上最最最最炫酷的黑客数据流—男人必备装❌神器