效果展示
1.黑客帝国代码雨
2.道家真言
模板下载地址
1.说明
模板我上传到CSDN资源了，不需要积分就可以下载的，大家随便去，模板把html，js，css分开了，好歹标准些，别从我这直接复制，很丑，哈哈，符合规范一些，去下载一个，再次声明不要积分的(发生了点儿我不知道的情况,没传过资源,不知道为什么,我设置的是0积分,可是他自己涨上去了…)。😀😀😀😀
2.黑客帝国代码雨下载
3.道家真言下载
代码实现
这整段代码都写在了html里，是为了让大家复制并且自己演示一下，但是千万不要直接用，太不正规了，想要资源的去上面链接下载，不要积分的😏😏😏😏
之所以先扔个代码，主要是有人他就是来看代码的，基础知识、涉及到的点不需要看，哈哈，关于每行怎么写的详细的分析我会在后面写，尽量把每个人当作小白，让你们搞懂这段代码💪💪💪💪
1.黑客帝国代码雨
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Code</title>
<style>
body{
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script>
const width = document.getElementById("myCanvas").width = screen.availWidth;
const height = document.getElementById("myCanvas").height = screen.availHeight;
const ctx = document.getElementById("myCanvas").getContext("2d");
const arr = Array(Math.ceil(width / 10)).fill(0);
const str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789".split("");
function rain() {
//这里的重点就是每次调用这个方法的时候都会重新绘制一张透明度为0.05的黑色画布来覆盖前图
//所以就会形成人眼中的下雨效果
ctx.fillStyle = "rgba(0,0,0,0.05)";
ctx.fillRect(0, 0, width, height);
ctx.fillStyle = "#0f0";
arr.forEach(function (value, index) {
ctx.fillText(str[Math.floor(Math.random() * str.length)], index * 10, value + 10);
arr[index] = value >= height || value > 8888 * Math.random() ? 0 : value + 10;
});
}
setInterval(rain, 30);
</script>
</body>
</html>
2.道家真言
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Taoism</title>
<style>
body{
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script>
const width = document.getElementById("myCanvas").width = screen.availWidth;
const height = document.getElementById("myCanvas").height = screen.availHeight;
const ctx = document.getElementById("myCanvas").getContext("2d");
//因为后面一个字50px,所以用总宽度除以50恰好够用,不至于浪费资源
const arr = Array(Math.ceil(width / 50)).fill(0);
//这里为了不出现下坠的视觉效果，所以加了很多空格，大家感兴趣可以把空格去了，自己看看什么效果。
const str = "临兵斗者皆阵列前行乾坤震巽坎离艮兑 ".split("");
function rain() {
ctx.fillStyle = "rgba(0,0,0,0.05)";
ctx.fillRect(0, 0, width, height);
ctx.fillStyle = "#f00";
arr.forEach(function (value, index) {
ctx.font = "50px 华文行楷";
ctx.fillText(str[Math.floor(Math.random() * str.length)], index * 50, value + 50);
arr[index] = value >= height || value > 8888 * Math.random() ? 0 : value + 50;
});
}
setInterval(rain, 50);
</script>
</body>
</html>
相关方法的介绍
这里我会向大家介绍上面一些JavaScript方法的使用，主要对象是和我差不多的小白😂😂😂，所以高手请自动忽略，哈哈，不过说错的地方依旧需要指点的，请在评论区批评指正，谢谢。
1.style标签
<style>
body{
margin: 0;
overflow: hidden;
}
</style>
这里面写的是设置body标签里面样式，margin为外边距，给大家看看0和不是0的效果：
这个是margin为0，没有了白边，是整个填充在窗口的
这个是没有设置margin为0，有白边
而body标签里的overflow为当内容溢出元素框时发生的事情，官方解释读来晦涩，我直接演示给大家看看hidden（隐藏）和不设置的效果：
这个是设置overflow为hidden，超出窗口的部分直接隐藏起来，不会有滚动条出现
这个是没有设置overflow为hidden，超出窗口的部分依旧会显示，并通过滚动条来进行查看窗口外的部分。
2.JavaScript Const & split
const width = document.getElementById("myCanvas").width = screen.availWidth;
const height = document.getElementById("myCanvas").height = screen.availHeight;
const ctx = document.getElementById("myCanvas").getContext("2d");
const arr = Array(Math.ceil(width / 10)).fill(0);
const str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789".split("");
const 用于声明一个或多个常量，声明时必须进行初始化，且初始化后值不可再修改;
但是
const 定义的变量并非常量，并非不可变，它定义了一个常量引用一个值。使用 const 定义的对象或者数组，其实是可变的。
也就是说，对于第一、二、三、五行定义的变量我们是无法修改，无法重新定义的，但是第四行中的arr却是可以修改里面的元素的，但是无法重新赋予其一个新的数组。
前两行是来获取显示浏览器的屏幕的可用宽度、高度并赋值给canvas，然后初始化变量width和变量height。
第三行是用来获取一个用于在画布上绘图的环境。
第四行是用于获取一个长度指定，元素全为0的数组，以便后面调用map方法，至于为什么会/10呢，因为这一个字符的字号就是10，你们可以看看，在“道家真言”里面我指定了字号为50，这里自然也改成50了；这里其实除不除无所谓，只不过会省点儿资源。
第五行是指定显示的字符串，并且分割为单个字符，返回一个数组。
3.JavaScript function
function rain() {
ctx.fillStyle = "rgba(0,0,0,0.05)";
ctx.fillRect(0, 0, width, height);
ctx.fillStyle = "#0f0";
arr.forEach(function (value, index) {
ctx.fillText(str[Math.floor(Math.random() * str.length)], index * 10, value + 10);
arr[index] = value >= height || value > 8888 * Math.random() ? 0 : value + 10;
});
}
先不看详细的代码，这里是定义了一个方法，用来进行你们眼里看到的“下雨”的操作，其实是每个单独字的闪烁来实现的，事先规划好样式，然后通过arr来调用map方法，实现字符的随机填充以及按照指定的顺序依次闪烁，超过屏幕高度或者达到随机定义的高度便会顶端再次重新闪烁。
4.JavaScript fillStyle
ctx.fillStyle = "rgba(0,0,0,0.05)";
fillStyle 属性设置或返回用于填充绘画的颜色、渐变或模式。rgba指定了rgb颜色以及Alpha透明度。
RGBA(R,G,B,A)
取值：
- R：红色值。正整数 | 百分数
- G：绿色值。正整数 | 百分数
- B：蓝色值。正整数 | 百分数
- A：Alpha透明度,取值0~1之间。
5.JavaScript fillRect
ctx.fillRect(0, 0, width, height);
fillRect() 方法绘制“已填色”的矩形。默认的填充颜色是黑色。(Rect-rectangular矩形)。
context.fillRect(x,y,width,height);
- x 矩形左上角的 x 坐标。
- y 矩形左上角的 y 坐标。
- width 矩形的宽度，以像素计。
- height 矩形的高度，以像素计。
6.JavaScript fillText
ctx.fillStyle = "#0f0";
ctx.fillText(str[Math.floor(Math.random() * str.length)], index * 10, value + 10);
fillText() 方法在画布上绘制填色的文本。文本的默认颜色是黑色。前面已经定义文字为绿色，即代码的颜色；在“道家真言”的代码里还定义了字号和字体：
context.fillText(text,x,y,maxWidth);
- text 规定在画布上输出的文本。
- x 开始绘制文本的 x 坐标位置（相对于画布）。
- y 开始绘制文本的 y 坐标位置（相对于画布）。
ctx.font = "50px 华文行楷";
这里的代码
str[Math.floor(Math.random() * str.length)]
这一部分是填充的内容,表示随机选取定义的数组中的一个元素，以便出现单个字符。
7.JavaScript forEach
arr.forEach(function (value, index) {
ctx.fillText(str[Math.floor(Math.random() * str.length)], index * 10, value + 10);
arr[index] = value >= height || value > 8888 * Math.random() ? 0 : value + 10;
}
forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。这里给大家提个醒，forEach是不会有返回值的，如果需要接收返回值，就调用.map方法，这里用map当然也可以，但是没必要，不符合规范。
array.forEach(function(currentValue, index, arr), thisValue)
- function(currentValue, index, arr) 数组中每个元素需要调用的函数。
- currentValue 必需。当前元素
- index 可选。当前元素的索引值。
- arr 可选。当前元素所属的数组对象。
- thisValue 可选。传递给函数的值一般用 “this” 值。
由上面可以知道，数组arr通过调用forEach方法，将数组中每个元素在第一行进行打印，然而，forEach方法是没办法改变原数组的，所以才需要第三行代码：
arr[index] = value >= height || value > 8888 * Math.random() ? 0 : value + 10;
来手动改变数组元素，如果没有这一行，大家分析分析会发生啥，没错，第一行一直刷新。
8.JavaScript setInterval
setInterval(rain, 30);
这是最重要的一行代码，简直就是整个代码块的核心方法，因为只有他出现了，大家看到的才会有这漫天飞舞的字母
setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
直观解释——每30毫秒调用一次rain方法，让雨滴每30毫秒出现一波。时间值大家可以取巧比如想1秒30次，就可以写（1000/30），一秒50次就可以写（1000/50）……
尾声
通过这些，大家应该能够彻底理解这些代码了，我相信也能自己写出来一份了，俗话说的好，授人以鱼不如授人以渔，我这是鱼给了，网子也给了，还告诉你们哪里有鱼了，同时也希望大家能告诉我我这个网子哪里破了（写的不好的地方），或者也能分享点儿打鱼方法上来，不胜感激！！请不吝赐教😝😝😝😝
转载：https://blog.csdn.net/g55zhw93/article/details/108019264