<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>代码雨</title>
<style>
* {
margin: 0;
padding: 0;
overflow: hidden;
}
h1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-size: 50px;
}
</style>
</head>
<body>
<h1>没啥卵用-纯装X</h1>
<script>
// 创建一个canvas元素，并获取其上下文
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
// 设置canvas的宽高
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// 将canvas添加到body中
document.body.appendChild(canvas);
// 设置字体大小
var fontSize = 16;
// 计算列数
var columns = canvas.width / fontSize;
// 创建一个数组，用于存储每一列的雨滴位置
var drops = [];
// 初始化每一列的雨滴位置
for (var x = 0; x < columns; x++) {
drops[x] = 1;
}
// 绘制代码雨需要的字母 从这里里面取字符
var str = 'javascriptcoderain-xtqd';
function draw() {
// 绘制一个透明度为0.05的黑色矩形，用于清除上一帧的绘制
ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
// 绘制一个矩形，覆盖整个canvas
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 设置字体颜色为绿色
ctx.fillStyle = '#0F0';
// 设置字体样式
ctx.font = fontSize + 'px arial';
// 遍历每一列的雨滴位置
for (var i = 0; i < drops.length; i++) {
// 随机选择一个字符
var text = str[Math.floor(Math.random() * str.length)];
// 绘制字符
ctx.fillText(text, i * fontSize, drops[i] * fontSize);
// 如果雨滴位置超过了canvas的高度，则重新开始
if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) {
drops[i] = 0;
}
// 雨滴位置向下移动
drops[i]++;
}
}
// 每隔33毫秒绘制一次
setInterval(draw, 33);
</script>
</body>
</html>
