canvas实现代码雨

学习抖音: @渡一前端必修课

效果图:

全部代码:

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>

    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        #view {
            max-width: 100vw;
            max-height: 100vh;
            overflow: hidden;
            display: block;
        }
    </style>
</head>

<body>
    <canvas id="view"></canvas>
</body>
<script>
    // 获取canvas元素
    const cvs = document.getElementById("view");

    // 获取窗口大小  window.devicePixelRatio
    // window.devicePixelRatio为一个双精度浮点值,指示显示器的物理像素分辨率与CSS像素分辨率之比。简单来说,它告诉浏览器应使用多少屏幕物理像素来绘制单个CSS像素。
    const width = window.innerWidth * window.devicePixelRatio,
        height = window.innerHeight * window.devicePixelRatio

    console.log(width)
    console.log(height)
        // 设置 canvas尺寸
    cvs.width = width
    cvs.height = height

    // 获取绘制上下文
    const ctx = cvs.getContext("2d")

    // 字体大小
    const fontSize = 20 * window.devicePixelRatio;

    // 定义列宽和多少列
    const columnWidth = 20;
    const columnCount = Math.floor(width / 20);

    // 没一列下一个文字是第几个
    const nextChar = new Array(columnCount).fill(0)

    // 绘制
    function draw() {
        ctx.fillStyle = "rgba(255,255,255,0.2)";
        ctx.fillRect(0, 0, width, height)
        for (let i = 0; i < columnCount; i++) {
            ctx.fillStyle = getRandomColor();
            let char = getRandomChar();
            ctx.font = `${fontSize}px "Roboto Mono"`
            let x = i * columnWidth; // x 轴的位置
            const s = nextChar[i]
            let y = (s + 1) * fontSize; //y 轴的位置
            ctx.fillText(char, x, y)
            if (y > height && Math.random() > 0.95) {
                nextChar[i] = 0
            } else {
                nextChar[i]++
            }

        }
    }

    setInterval(draw, 30)
        // 获取随机颜色
    function getRandomColor() {
        let color = [
            "#4150d8",
            "#28bf7e",
            "#ed7c2f",
            "#ff0000",
            "#f9cf36",
            "#4a5bdc",
            "#7b04f4",
            "#ee04f4",
            "#04a0f4",
            "#1af404",
            "#d4f404",
            "#f404f1",
        ];
        return color[Math.floor(Math.random() * color.length)]
    }

    // 获取随机文字
    function getRandomChar() {
        const str = "qwertyuioplkjhgfdabzxcmv"
        return str[Math.floor(Math.random() * str.length)]
    }
</script>

</html>
相关推荐
sunbyte1 小时前
Tailwind CSS 初学者入门指南:项目集成,主要变更内容!
前端·css
可爱的秋秋啊2 小时前
vue3,element ui框架中为el-table表格实现自动滚动,并实现表头汇总数据
前端·vue.js·笔记·elementui
一夜枫林2 小时前
uniapp自定义拖拽排列
前端·javascript·uni-app
良艺呐^O^2 小时前
uniapp实现app自动更新
开发语言·javascript·uni-app
IT瘾君4 小时前
JavaWeb:Html&Css
前端·html
264玫瑰资源库4 小时前
问道数码兽 怀旧剧情回合手游源码搭建教程(反查重优化版)
java·开发语言·前端·游戏
喝拿铁写前端4 小时前
从圣经Babel到现代编译器:没开玩笑,普通程序员也能写出自己的编译器!
前端·架构·前端框架
HED5 小时前
VUE项目发版后用户访问的仍然是旧页面?原因和解决方案都在这啦!
前端·vue.js
拉不动的猪5 小时前
前端自做埋点,我们应该要注意的几个问题
前端·javascript·面试
王景程5 小时前
如何测试短信接口
java·服务器·前端