html 代码雨

最新推荐文章于 2024-02-16 14:48:39 发布

TieWay59

最新推荐文章于 2024-02-16 14:48:39 发布

阅读量1.8k

点赞数 2

分类专栏：前端

原文链接：https://blog.csdn.net/Feng_wwf/article/details/108461313?utm_medium=distribute.pc_feed.none-task-blog-personrec_tag-13.nonecase&depth_1-utm_source=distribute.pc_feed.none-task-blog-personrec_tag-13.nonecase&request_id=5f59e6b6996e7a555189dc57

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

https://blog.csdn.net/Feng_wwf/article/details/108461313

在这里插入图片描述

玩了一下，好像实现了每一行都是完整的话，造成一种密文的效果hhh。

<!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 = "$%@#$%$@#%$#@%#@$%$@#%$#@!%^!%#^%$!关键字#@$#@$#@!$!#@$#@!^$$$#@$#@!$!#@$#@!$".split("");

function rain() {
    ctx.fillStyle = "rgba(0,0,0,0.05)";
    ctx.fillRect(0, 0, width, height);
    ctx.fillStyle = "#8FA";
    arr.forEach(function (value, index) {
    //Math.floor(Math.random() * str.length)]
        ctx.fillText(str[(index + value)%str.length], index * 10, value + 10);
        arr[index] = value >= height || value > 168888 * Math.random() ? 0 : value + 12;
    });
}

setInterval(rain, 30);
</script>
</body>
</html>

TieWay59

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html 代码雨

https://blog.csdn.net/Feng_wwf/article/details/108461313?utm_medium=distribute.pc_feed.none-task-blog-personrec_tag-13.nonecase&depth_1-utm_source=distribute.pc_feed.none-task-blog-personrec_tag-13.nonecase&request_id=5f59e6b6996e7a555189dc57玩了一下，
复制链接

扫一扫