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>
相关推荐
待磨的钝刨1 小时前
【格式化查看JSON文件】coco的json文件内容都在一行如何按照json格式查看
开发语言·javascript·json
逐·風4 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫4 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦5 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子5 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山6 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享6 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
从兄7 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
清灵xmf8 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨8 小时前
VUE+Vite之环境文件配置及使用环境变量
前端