黑客帝国彩色特效

最新推荐文章于 2021-02-27 06:21:51 发布

禅悟刂

最新推荐文章于 2021-02-27 06:21:51 发布

阅读量631

点赞数 1

分类专栏： JS特效篇文章标签： js

本文链接：https://blog.csdn.net/weixin_42575310/article/details/89288525

版权

JS特效篇专栏收录该内容

6 篇文章 5 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
		</style>
	</head>
	<body>
		<canvas id="canvas" style="background: #000;"></canvas>
		<script>
			//获取canvas
			var canvas = document.getElementById("canvas");
			//获取画板权限
			var cit = canvas.getContext("2d");
			//获取屏幕的宽高
			var s = window.screen;
			var w = s.width;
			var h = s.height;
			console.log(w)
			//将屏幕的宽高给画板
			canvas.width = w;
			canvas.height = h;
			//设置文字大小
			var fontSize = 14;
			//计算一行有多少个文字   向下取整
			var clos = Math.floor(w/fontSize);
			//创建一个数组 把clos个y坐标存储起来
			var drops = [];
			var str = "KSJFKASFNLKAFNLKANFLKSFLKSADNFLKSDJFLKSDJFLK!@#$%&*[]DFKANFfmkadfnkldsnflksanf";
			//存储clos个y坐标‘
			for(var i = 0;i<clos;i++){
				drops.push(0)
			}
			//绘制文字
			function drawString(){
				//给矩形一个填充色
				cit.fillStyle="rgba(0,0,0,0.05)";
				//绘制一个矩形
				cit.fillRect(0,0,w,h);
				cit.font="6000,"+fontSize+"px"; 
				//设置文字样式 文字颜色
				cit.fillStyle=rgbColor();
				for(var i = 0;i<clos;i++){//获取所有的文字
					//x坐标
					var x = i*fontSize;
					//y坐标
					var y = drops[i]*fontSize;
					//绘制文字
					//设置绘制文字  位置
					cit.fillText(str[Math.floor(Math.random()*str.length)],x,y);
					//Math.random() 取值0~1   但是取不到1
					if(y>h&&Math.random()>0.99){
						drops[i]=0;
					}
					drops[i]++;
					
				}
			}
			//执行方法 每个30毫秒执行一次
			setInterval(drawString,30);
			function rgbColor(){
				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+")"
			}
			
			
			
		</script>
	</body>
</html>

禅悟刂

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
黑客帝国彩色特效

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } </style> </head>...
复制链接

扫一扫