当前位置: article > 正文

代码雨类库的实现_code rain代码

作者：小丑西瓜9 | 2024-02-15 14:52:24

踩

code rain代码

代码雨类库的实现

电影黑客帝国有个代码雨效果 – 挺酷的，我在网上看到了使用js写的代码雨的代码，我把由函数实现的代码，改为使用类实现代码雨特效。

一、设计一个简单美化的网页且包含该有的功能

功能：

    1.一块画布 -- 实现代码雨的展示
    2. 初始化按钮 -- 让代码回到初始状态
    3. 启动/继续按钮 -- 让代码开始或者继续下
    4. 停止按钮 -- 让代码雨停止
    5. 后续可升级......
1
2
3
4
5

二、先写html代码

<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>流星雨</title>
		<meta name="keywords" content="关键词，关键字">
		<meta name="description" content="描述信息">
		<style>
			body {
				margin: 0;
				overflow: hidden;
			}
			canvas {
				background:#000000;
				display: block;
			}
			
		</style>
	</head>
	<body>
		<!-- 在外层套一个大框 -->
		<div class="main center" >
			<!-- <canvas>画布 画板 画画的本子 -->
			<canvas width=600 height=450 class="center" id="canvas"></canvas>
			<!-- 3个按钮平放在画布下面 -->
			<div class="center control">
				<button type="button" id="init">初始化</button>
				<button type="button" id="start">启动/继续</button>
				<button type="button" id="stop">停止</button>
			</div>
			
		</div>
	</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

效果图：在这里插入图片描述

三、使用css来美化页面

		<style>
			body {
				margin: 0;
				overflow: hidden;
			}
			canvas {
				background:#000000;
				display: block;
			}
			.main {
				width: 740px;
				height: 540px;
				padding: 30px;
				border-style:solid;
				border-width:1px;
			}
			.center {margin: 20px auto;}
			.control { 
				width: 600px;
				height: 60px;
			 }
			 button {
			 	width: 100px;
				height: 40px;
				font-size: 18px;
				display: block;
				float:left;
				margin: 10px 50px;
			 }
			
		</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

效果图：在这里插入图片描述

四、使用js实现代码雨功能

1.实现启动/继续按钮的功能代码

<script>
 // 名称：代码雨类
class CodeRain {
    //定义属性
    //设置文字大小 
    fontSize = 14;
    //计算一行有多少个文字 取整数 向下取整
    clos = Math.floor(canvas.width/this.fontSize);
    //思考每一个字的坐标
    //创建数组把clos 个 0 （y坐标存储起来）
    drops = new Array(this.clos).fill(0);
    str = "qwertyuiopasdfghjklzxcvbnm";
    clear = null;
    timer = false;
    init = false;

    constructor(canvas) {
    this.canvas = document.getElementById(canvas);
    this.ctx = this.canvas.getContext("2d");
  }

  //开启流星雨方法
  rain = () =>{
    if (this.timer === false) {
        //定义一个定时器，每隔50毫秒执行一次
        this.clear = setInterval(this.drawString,50);
        this.timer = true;
        this.init = true;
    }
  }

  //绘制文字
  drawString = () => {
    //给矩形设置填充色
    this.ctx.fillStyle="rgba(0,0,0,0.05)";
    //绘制一个矩形
    this.ctx.fillRect(0,0,this.canvas.width,this.canvas.height);

    //添加文字样式
    this.ctx.font = "600 "+this.fontSize+"px 微软雅黑";
    //设置文字颜色
    this.ctx.fillStyle = "#00ff00";
    for(let i = 0;i<this.clos;i++) {
        //x坐标
        let x = i*this.fontSize;
        //y坐标
        let y = this.drops[i]*this.fontSize;
        //设置绘制文字
        this.ctx.fillText(this.str[Math.floor(Math.random()*this.str.length)],x,y);
        if(y>this.canvas.height&&Math.random()>0.99){
            this.drops[i] = 0;
        }
        // console.log(y);
        this.drops[i]++;
    }

  }

}
const coderain = new CodeRain("canvas");
document.getElementById("start").addEventListener("click", coderain.rain);
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

效果图：在这里插入图片描述

2.实现停止按钮的功能代码

//雨停了的方法
  rainStops = () => {
    if (this.timer === true){
        clearInterval(this.clear);
        this.timer = false;
        this.init = true;
    }
  }
1
2
3
4
5
6
7
8

效果图：在这里插入图片描述

3.实现初始化按钮的功能代码

//初始化
  init = () => {
    if (this.init === true){
        clearInterval(this.clear);
        this.timer = false;
        this.init = false;
        this.ctx.fillStyle="rgba(0,0,0)";
        //绘制一个矩形
        this.ctx.fillRect(0,0,this.canvas.width,this.canvas.height);
        this.drops.fill(0);
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12

效果图：在这里插入图片描述

五、完整代码

<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>流星雨</title>
		<meta name="keywords" content="关键词，关键字">
		<meta name="description" content="描述信息">
		<style>
			body {
				margin: 0;
				overflow: hidden;
			}
			canvas {
				background:#000000;
				display: block;
			}
			.main {
				width: 740px;
				height: 540px;
				padding: 30px;
				border-style:solid;
				border-width:1px;
			}
			.center {margin: 20px auto;}
			.control { 
				width: 600px;
				height: 60px;
			 }
			 button {
			 	width: 100px;
				height: 40px;
				font-size: 18px;
				display: block;
				float:left;
				margin: 10px 50px;
			 }
			
		</style>
	</head>
	<body>
		<!-- 在外层套一个大框 -->
		<div class="main center" >
			<!-- <canvas>画布 画板 画画的本子 -->
			<canvas width=600 height=450 class="center" id="canvas"></canvas>
			<!-- 3个按钮平放在画布下面 -->
			<div class="center control">
				<button type="button" id="init">初始化</button>
				<button type="button" id="start">启动/继续</button>
				<button type="button" id="stop">停止</button>
			</div>

			<script>
			 // 名称：代码雨类
			class CodeRain {
				//定义属性
				//设置文字大小 
				fontSize = 14;
				//计算一行有多少个文字 取整数 向下取整
				clos = Math.floor(canvas.width/this.fontSize);
				//思考每一个字的坐标
				//创建数组把clos 个 0 （y坐标存储起来）
				drops = new Array(this.clos).fill(0);
				str = "qwertyuiopasdfghjklzxcvbnm";
				clear = null;
				timer = false;
				init = false;

				constructor(canvas) {
			    this.canvas = document.getElementById(canvas);
			    this.ctx = this.canvas.getContext("2d");
			  }

			  //开启流星雨方法
			  rain = () =>{
			  	if (this.timer === false) {
			  		//定义一个定时器，每隔50毫秒执行一次
					this.clear = setInterval(this.drawString,50);
					this.timer = true;
					this.init = true;
					console.log('rain');
			  	}
			  }

			  //雨停了的方法
			  rainStops = () => {
			  	if (this.timer === true){
			  		clearInterval(this.clear);
			  		this.timer = false;
			  		this.init = true;
			  		console.log('rainStops');
			  		console.log(this.clear);
			  	}
			  }

			  //初始化
			  init = () => {
			  	if (this.init === true){
			  		clearInterval(this.clear);
			  		this.timer = false;
			  		this.init = false;
			  		this.ctx.fillStyle="rgba(0,0,0)";
				    //绘制一个矩形
				    this.ctx.fillRect(0,0,this.canvas.width,this.canvas.height);
				    this.drops.fill(0);
				    console.log('init');
			  	}

			  }

			  //绘制文字
			  drawString = () => {
			  	//给矩形设置填充色
			    this.ctx.fillStyle="rgba(0,0,0,0.05)";
			    //绘制一个矩形
			    this.ctx.fillRect(0,0,this.canvas.width,this.canvas.height);

			    //添加文字样式
			    this.ctx.font = "600 "+this.fontSize+"px 微软雅黑";
			    //设置文字颜色
			    this.ctx.fillStyle = "#00ff00";
			    for(let i = 0;i<this.clos;i++) {
			    	//x坐标
			        let x = i*this.fontSize;
			        //y坐标
			        let y = this.drops[i]*this.fontSize;
			        //设置绘制文字
			        this.ctx.fillText(this.str[Math.floor(Math.random()*this.str.length)],x,y);
			        if(y>this.canvas.height&&Math.random()>0.99){
			            this.drops[i] = 0;
			        }
			        // console.log(y);
			        this.drops[i]++;
			    }
			    
			  }

			}
			const coderain = new CodeRain("canvas");
			document.getElementById("init").addEventListener("click", coderain.init);
			document.getElementById("start").addEventListener("click", coderain.rain);
			document.getElementById("stop").addEventListener("click", coderain.rainStops);
			</script>	
		</div>
	</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145

博文参考

简单JS打造酷炫代码雨（黑客高逼格）| 脚本之家

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/85124