酷炫代码雨

简介: 酷炫代码雨

话不多说,直接上代码

<!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>


相关文章
|
前端开发 JavaScript
中秋之美——html+css+js制作中秋网页
中秋之美——html+css+js制作中秋网页
714 0
|
前端开发 程序员
程序员也可以很浪漫,精选10个圣诞节特效及源码
最近离圣诞节不远了、整理了一些关于圣诞相关的前端特效网页设计和小游戏的代码送大家、直接上效果吧。 代码过长的 可直接预览获取 [快速预览](https://www.hereitis.cn/articleDetails/969)
程序员也可以很浪漫,精选10个圣诞节特效及源码
|
6月前
|
前端开发
七夕特效惊艳全场!HTML+CSS带你DIY酷炫表白神器
七夕特效惊艳全场!HTML+CSS带你DIY酷炫表白神器
|
9月前
|
JavaScript
【UI】 欢快畅游的小鱼特效
【UI】 欢快畅游的小鱼特效
61 1
|
9月前
网页星光闪耀背景动画特效
网页星光闪耀背景动画特效
50 0
网页星光闪耀背景动画特效
|
编解码 Python
Python3,我把新年祝福写在“雨“中,你看,雨一直下,气氛还算融洽,在同个屋檐下....
Python3,我把新年祝福写在“雨“中,你看,雨一直下,气氛还算融洽,在同个屋檐下....
70 0
【代码分享】【像极了恋爱】甜甜的汤圆,祝丽姿元宵快乐(表白特效)
【代码分享】【像极了恋爱】甜甜的汤圆,祝丽姿元宵快乐(表白特效)
143 0
|
JavaScript 前端开发
【原生JS】做一个打字消除小游戏,学习摸鱼两不误
【原生JS】做一个打字消除小游戏,学习摸鱼两不误
139 0
【原生JS】做一个打字消除小游戏,学习摸鱼两不误
|
前端开发 JavaScript
2022圣诞代码合集(圣诞树+圣诞老人)
2022圣诞代码合集(圣诞树+圣诞老人)
350 0
|
前端开发 JavaScript
2023年新年烟花代码(背景音乐完整版)
2023年新年烟花代码(背景音乐完整版)
289 0