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);