Pressidian
花园入口
笔记
项目
关于
实验室
GitHub
花园入口
笔记
项目
关于
实验室
GitHub

KNOWLEDGE PATHS

笔记库
当前位置
笔记库/前端/项目笔记/个人主页

下落代码背景

1 分钟阅读 · Note

目录树 578 篇

          • 下落代码背景
      • 前端技术栈
    • 笔记目录
    • CLAUDE.md
    • Vue 组件与 Render 函数

关联笔记 6

↗「Feature」Introduce Crate as an independent metadata entity[ˈentəti] | 引入 Crate 作为独立元数据实体共同主题↗表单数据获取&提交需要loading共同主题↗表单最佳实践指南共同主题↗不使用解构赋值共同主题↗踩坑共同主题↗登录页共同主题
<canvas id="myCanvas"width="1529" height="943">
<script>
        // 刷新页面
        function refreshPage() {
            location.reload();
        }

        // 初始化画布
        var canvas = document.getElementById('myCanvas'),
            ctx = canvas.getContext('2d');

        // 设置画布的宽度和高度
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        // 设置字母
        var letters = 'LeetCode LeetCode LeetCode LeetCode LeetCode LeetCode LeetCode';
        letters = letters.split('');

        // 设置列数
        var fontSize = 10,
            columns = canvas.width / fontSize;

        // 设置下落位置
        var drops = [];
        for (var i = 0; i < columns; i++) {
            drops[i] = 1;
        }

        // 设置颜色
        var colors = ['#05FF00', '#00BFFF', '#FF4500', '#FFA500', '#C202C2'];
        var lightBackgroundColors = ['#013600', '#002E3D', '#3E1100', '#342100', '#3C003C']
        var colorIndex = Math.floor(Math.random() * colors.length);

        // 绘制函数
        function draw() {
            ctx.fillStyle = 'rgba(0, 0, 0, .1)';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            ctx.fillStyle = colors[colorIndex];
            for (var i = 0; i < drops.length; i++) {
                var text = letters[Math.floor(Math.random() * letters.length)];
                ctx.fillText(text, i * fontSize, drops[i] * fontSize);
                drops[i]++;
                if (drops[i] * fontSize > canvas.height && Math.random() > .95) {
                    drops[i] = 0;
                }
            }
        }

        // 循环动画
        setInterval(draw, 30);

        var light = document.querySelector('.light');
        light.style.background = colors[colorIndex];

        // 设置呼吸灯的背景颜色
        var lightWrapper = document.querySelector('.light-wrapper');
        lightWrapper.style.backgroundColor = lightBackgroundColors[colorIndex];
<script/>