炫酷代码雨

a濯

已于 2024-01-18 14:18:29 修改

阅读量391

点赞数 6

文章标签： css 前端

于 2024-01-18 14:16:09 首次发布

本文链接：https://blog.csdn.net/qq_46738283/article/details/135673198

版权

<!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>
    // 获取canvas元素的宽度和高度，并将宽度和高度设置为屏幕的可用宽度和高度 
const width = document.getElementById("myCanvas").width = screen.availWidth;
const height = document.getElementById("myCanvas").height = screen.availHeight;
    //  获取canvas的绘图上下文
const ctx = document.getElementById("myCanvas").getContext("2d");
    // 创建一个大小为width/10的数组并填充为0
const arr = Array(Math.ceil(width / 10)).fill(0);
    // 创建一个字符串用于存储字符
const str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("");
 
function rain() {
    //  设置颜色，并绘制一个全屏的矩形
ctx.fillStyle = "rgba(0,0,0,0.05)";
ctx.fillRect(0, 0, width, height);
    //  设置文字的颜色
ctx.fillStyle = "#0f0";
arr.forEach(function (value, index) {
    //  根据数组的索引值来绘制文字，x坐标为索引值*10，y坐标为value+10
ctx.fillText(str[Math.floor(Math.random() * str.length)], index * 10, value + 10);
    //从上一次绘制的位置开始，将数组设置为下一次绘制位置
arr[index] = value >= height || value > 8888 * Math.random() ? 0 : value + 10;
});
}
    // 每30毫秒执行一次rain函数
setInterval(rain, 30);
 
</script>
 
</body>
 
</html>