黑客二进制雨（html实现）

最新推荐文章于 2024-05-12 09:55:41 发布

繁星召唤

最新推荐文章于 2024-05-12 09:55:41 发布

阅读量801

点赞数 4

文章标签： html5 javascript

本文链接：https://blog.csdn.net/weixin_42582523/article/details/121457957

版权

效果图，F11全屏效果更佳

上代码

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>MGT-404</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			body {
				background: black;
			}

			canvas {
				display: block;
			}
		</style>
	</head>
	<body>
		<canvas id="ad"></canvas>
		<script>
			//获取画布对象
			var ad = document.getElementById("ad");
			//设置画布展示为2d
			var ctx = ad.getContext("2d");
			//设置canvas的宽度和高度
			ad.height = window.innerHeight;
			ad.width = window.innerWidth;
			//展示的文字
			var chinese = randomChars(num1);
			//字符串转为数组
			chinese = chinese.split("");
			//设置字体大小
			var font_size = 10;
			//计算列
			var columns = ad.width / font_size;
			//记录每列文字的y轴坐标
			var drops = [];
			//给每一个文字初始化一个起始点的位置
			for (var x = 0; x < columns; x++) drops[x] = 1;

			//绘画的函数
			function draw() {
				//布满全屏的黑色遮罩层
				ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
				ctx.fillRect(0, 0, ad.width, ad.height);
				ctx.fillStyle = "#0F0";
				//设置字体样式
				ctx.font = font_size + "px arial";
				//写入画布中
				for (var i = 0; i < drops.length; i++) {
					//随机生成文字
					var text = chinese[Math.floor(Math.random() * chinese.length)];
					ctx.fillText(text, i * font_size, drops[i] * font_size);
					//如果文字的Y轴坐标大于画布的高度，1/100*colunms概率将该文字的Y轴坐标重置为0
					if (drops[i] * font_size > ad.height && Math.random() > 0.975)
						drops[i] = 0;
					//文字Y轴坐标+1
					drops[i]++;
				}
			}
			//流动速度
			setInterval(draw, 50);
		</script>
	</body>
</html>

如想实现自定义文字可以修改 var chinese = "{{修改此处为需要的文字}}"，

也可以写一个随机生成字符的函数

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>MGT-404</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			body {
				background: black;
			}

			canvas {
				display: block;
			}
		</style>
	</head>
	<body>
		<canvas id="ad"></canvas>
		<script>
			// 生成随机个数，这里3-15个
			var num1 = (function num() {
				return Math.floor(Math.random() * 12 + 3)
			})()
			//(function 函数名())()是自执行函数

			//随机生成字母数字函数
			function randomChars(num) {
				//  字符串库
				var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
				//保存取出的字符串
				var code = "";
				//使用循环取出满足个数的字符
				while (code.length < num) {
					//通过随机数公式得到字符的下标
					var index = Math.floor(Math.random() * chars.length);
					var c = chars[index]; //随机产生的字符串
					//判断code中是否包含该字符
					if (code.indexOf(c) == -1) {
						code += c;
					}
				}
				//将得到的字符返回出去
				return code
			}

			//获取画布对象
			var ad = document.getElementById("ad");
			//设置画布展示为2d
			var ctx = ad.getContext("2d");
			//设置canvas的宽度和高度
			ad.height = window.innerHeight;
			ad.width = window.innerWidth;
			//展示的文字
			var chinese = randomChars(num1);
			//字符串转为数组
			chinese = chinese.split("");
			//设置字体大小
			var font_size = 10;
			//计算列
			var columns = ad.width / font_size;
			//记录每列文字的y轴坐标
			var drops = [];
			//给每一个文字初始化一个起始点的位置
			for (var x = 0; x < columns; x++) drops[x] = 1;

			//绘画的函数
			function draw() {
				//布满全屏的黑色遮罩层
				ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
				ctx.fillRect(0, 0, ad.width, ad.height);
				ctx.fillStyle = "#0F0";
				//设置字体样式
				ctx.font = font_size + "px arial";
				//写入画布中
				for (var i = 0; i < drops.length; i++) {
					//随机生成文字
					var text = chinese[Math.floor(Math.random() * chinese.length)];
					ctx.fillText(text, i * font_size, drops[i] * font_size);
					//如果文字的Y轴坐标大于画布的高度，1/100*colunms概率将该文字的Y轴坐标重置为0
					if (drops[i] * font_size > ad.height && Math.random() > 0.975)
						drops[i] = 0;
					//文字Y轴坐标+1
					drops[i]++;
				}
			}
			//流动速度
			setInterval(draw, 50);
		</script>
	</body>
</html>

繁星召唤

关注

4
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
黑客二进制雨（html实现）

效果图，F11全屏效果更佳上代码<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>MGT-404</title> <style> * { margin: 0; padding: 0; } .
复制链接

扫一扫