代码雨类库的实现
电影黑客帝国有个代码雨效果 -- 挺酷的，我在网上看到了使用js写的代码雨的代码，我把由函数实现的代码，改为使用类实现代码雨特效。
一、设计一个简单美化的网页且包含该有的功能
功能：
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>
效果图：
三、使用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>
效果图：
四、使用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>
效果图：
2.实现停止按钮的功能代码
//雨停了的方法
rainStops = () => {
if (this.timer === true){
clearInterval(this.clear);
this.timer = false;
this.init = true;
}
}
效果图：
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);
}
}
效果图：
五、完整代码
<!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>