酷炫代码雨

简介: 酷炫代码雨

话不多说,直接上代码

<!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>
    const width = document.getElementById("myCanvas").width = screen.availWidth;
    const height = document.getElementById("myCanvas").height = screen.availHeight;
    const ctx = document.getElementById("myCanvas").getContext("2d");
    const arr = Array(Math.ceil(width / 10)).fill(0);
    const str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789".split("");
function rain() {
    ctx.fillStyle = "rgba(0,0,0,0.05)";
    ctx.fillRect(0, 0, width, height);
    ctx.fillStyle = "#66ffff";
    arr.forEach(function (value, index) {
        ctx.fillText(str[Math.floor(Math.random() * str.length)], index * 10, value + 10);
        arr[index] = value >= height || value > 9999 * Math.random() ? 0 : value + 10;
    });
}
setInterval(rain, 30);
</script>
</body>
</html>


相关文章
|
算法 程序员 C#
程序员也可以很浪漫!这样的一款表白代码收藏馆项目,即使小白也可以使用,发给你的对象试试!
程序员也可以很浪漫!这样的一款表白代码收藏馆项目,即使小白也可以使用,发给你的对象试试!
326 0
|
10月前
推荐一款酷炫闪烁的告警按钮
闪烁的告警按钮
62 1
|
JavaScript
分享一款520表白节JS代码
今天给大家分享一款JS表白源码 js会随 随机颜色心形跟随鼠标互动520表白节女神表白利器! 修改的话就搜索:LOVEh 就能找到这个英文了。
56 0
分享一款520表白节JS代码
|
程序员 编译器 C语言
C语言满屏飘字表白代码
C语言满屏飘字表白代码
292 0
|
前端开发
酷炫表单,触感未来:HTML与CSS动画的创新应用!
酷炫表单,触感未来:HTML与CSS动画的创新应用!
html动态爱心代码【一】(附源码)
html动态爱心代码【一】(附源码)
13390 0
|
机器学习/深度学习 算法 测试技术
【网安专题10.25】10 TitanFuzz完全自动化执行基于变异的模糊测试:生成式(如Codex)生成种子程序,逐步提示工程+第一个应用LLM填充模型(如InCoder)+差分测试
【网安专题10.25】10 TitanFuzz完全自动化执行基于变异的模糊测试:生成式(如Codex)生成种子程序,逐步提示工程+第一个应用LLM填充模型(如InCoder)+差分测试
438 0
酷炫的粒子动态表白HTML源码
酷炫的粒子动态表白HTML源码,自己自定义文字,动态组合文字,进行表白,喜欢的朋友可以下载使用,很不错的表白HTML代码
247 0
酷炫的粒子动态表白HTML源码
|
机器人 C语言 Python
Python满屏飘字表白代码
Python满屏飘字表白代码
199 0
十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧!!!(三)
十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧!!!