整体思路：
- 确定好字符雨的具体字符是什么，需要多少行多少列这里是写死的其实也可以用循环加随机的方式生成不一样的字符雨，行列也可以读一下宽度然后做一下出发算一下也行
- 首先得有一张画布搞起，然后循环列数去绘画字符
- 定时器循环调取回话方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>字符雨</title>
</head>
<style>
*{
margin:0;
padding: 0;
box-sizing: border-box;
height: 100%;
}
#char-rain {
display: flex;
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
<body>
<canvas id="char-rain"></canvas>
<script>
// 获取canvas元素
var canvas = document.getElementById('char-rain');
// 获取画布上下文
var ctx = canvas.getContext('2d');
// 定义字符集
var chars = 'abcdefghijklmnopqrstuvwxyz1234567890';
// 定义字符雨的列数和行数
var columns = 800;
var rows = 500;
// 定义每个字符的宽度和高度
var charWidth = 5;
var charHeight = 5;
// 定义字符雨的速度
var speed = 30;
// 定义一个数组，用于存储每一列的字符
var drops = [];
// 初始化每一列的字符
for (var i = 0; i < columns; i++) {
drops[i] = Math.floor(Math.random() * rows);
}
// 绘制字符雨
function draw() {
// 设置画布背景色
ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 设置字体样式
ctx.font = charWidth + 'px monospace';
ctx.fillStyle = '#0f0';
// 绘制每一列的字符
for (var i = 0; i < columns; i++) {
// 随机选择一个字符
var char = chars[Math.floor(Math.random() * chars.length)];
// 绘制字符
ctx.fillText(char, i * charWidth, drops[i] * charHeight);
// 如果字符已经到达底部，则重新从顶部开始
if (drops[i] * charHeight > canvas.height && Math.random() > 0.975) {
drops[i] = 0;
}
// 增加字符的下落速度
drops[i]++;
}
}
// 每隔一段时间调用一次绘制函数，实现动画效果
setInterval(draw, speed);
</script>
</body>
</html>
复习点
一、canvas
提供了一个通过JavaScript 和 HTML的<canvas>元素来绘制图形的方式。
它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。
HTML5 <canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.
<canvas> 标签只是图形容器，但是必须使用脚本来绘制图形。
使用：
html部分：
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
- 本身具有宽高属性直接设置就好，单位默认px
- 也可以通过 id 或者 class类名 或者 内敛样式 直接去定义宽高都可以的
- 不设置的话默认宽300px高150px
- 通常用 id ，在后续脚本编写时会经常用到
JavaScript部分：
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
- 通常先通过id获取到dom元素
dom.getContext("2d")创建context上下文对象，大部分脚本行为都是围绕这个context对象展开的
这个代码里面用到的
fillStyle属性：填充绘画颜色、渐变或模式。这里拿它做背景用了fillRect方法：绘制被填充的矩形。这里是用它确定好画布大小。
需要知道的是
fillRect这个方法有四个参数（x，y，width，height）分别是矩形开始的x，y轴坐标以及矩形宽高
默认的填充颜色是黑色
font属性：文本内容的字体属性。这个代码里面字符的字体属性fillText方法：在画布上绘制被填充的文本。这里就是把字符写上去。
需要知道的是
fillText这个方法有四个参数（text,x,y,maxWidth）分别是填充文本，该文本相对于画布的x，y轴坐标以及允许的最大文本宽度
最后一个参数maxWidth选填
关于 上下文对象的属性和方法
二、setInterval
我们通常称之为计时器同样被称之为计时器的还有setTimeout
他们的不同点在于调取次数，setInterval循环无限次调用直到页面关闭或者clearInterval（）清除；而setTimeout是只会调用一次。
1、定义
- 可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。
由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
2、语法及参数
setInterval(code, milliseconds);
setInterval(function, milliseconds, param1, param2, ...)
code/function必需。要调用一个代码串，也可以是一个函数。milliseconds必须。周期性执行或调用code/function之间的时间间隔，以毫秒计。param1, param2, ...可选。 传给执行函数的其他参数（IE9 及其更早版本不支持该参数）。
3、返回值
- 返回一个
ID（数字），可以将这个ID传递给clearInterval()，clearTimeout()以取消执行。
参考：
1、菜鸟关于canvas
2、canvas的MDN
