js实现代码雨通过js代码加上canvas实现代码雨功能，通过js代码加上canvas实现代码雨功能，通过js代码加上c

js实现代码雨

<!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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
    </style>
</head>

<body>
    <canvas id="rain"></canvas>
    <script src="./study.js"></script>
</body>

</html>

js部分

let canvas = document.querySelector('#rain');
let ctx = canvas.getContext('2d');
//容器大小

canvas.width = screen.availWidth;
canvas.height = screen.availHeight;
let str = '代码雨内容';
//维护一个数组容纳所有'雨滴'
let arr = Array(Math.trunc(canvas.width / 10)).fill(0);
const rain = () => {
    ctx.fillStyle = 'rgba(0,0,0,0.05)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = '#0f0';
    arr.forEach((item, index) => {
        ctx.fillText(str[Math.floor(Math.random() * str.length)], index * 10, item + 10);//绘制内容
        arr[index] = item > canvas.height ? 0 : item + Math.random() * 20;//累加arr里的数值，使内容下移
    });
};
setInterval(rain, 40);