电子雨代码-html

news2024/12/28 19:16:51

电子雨代码

动画效果展示在这里插入图片描述

代码

<!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 = "#0f0";

            arr.forEach(function (value, index) {

                ctx.fillText(str[Math.floor(Math.random() * str.length)], index * 10, value + 10);

                arr[index] = value >= height || value > 8888 * Math.random() ? 0 : value + 10;

            });

        }

        setInterval(rain, 30);

    </script>

</body>

</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1375550.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

鸿蒙Harmony--状态管理器--@Prop详解

鸿蒙Harmony--状态管理器--@Prop详解

纵横千里独行客&#xff0c;何惧前路雨潇潇。夜半浊酒慰寂寞&#xff0c;天明走马入红尘。且将新火试新茶&#xff0c;诗酒趁年华。青春以末&#xff0c;壮志照旧&#xff0c;生活以悟&#xff0c;前路未明。时间善变&#xff0c;可执着翻不了篇。时光磨我少年心&#xff0c;却…
阅读更多...
c++学习第九讲---类和对象---多态

c++学习第九讲---类和对象---多态

多态&#xff1a; 1.多态的基本概念&#xff1a; &#xff08;1&#xff09;多态分为两类&#xff1a; 静态多态&#xff1a;函数重载和运算符重载&#xff1b; 动态多态&#xff1a;派生类和虚函数实现运行时多态。 &#xff08;2&#xff09;静态多态和动态多态的区别&am…
阅读更多...
动态规划day03

动态规划day03

343. 整数拆分(第二次做还是没弄明白) 力扣题目链接(opens new window) 给定一个正整数 n&#xff0c;将其拆分为至少两个正整数的和&#xff0c;并使这些整数的乘积最大化。 返回你可以获得的最大乘积。 示例 1: 输入: 2输出: 1解释: 2 1 1, 1 1 1。 示例 2: 输入: …
阅读更多...
了解特权身份管理（PIM）的基础知识

了解特权身份管理（PIM）的基础知识

要了解特权身份&#xff0c;首先必须确定身份是什么&#xff0c;管理员可用于验证属于网络的用户的真实性的任何形式的唯一身份验证都是身份&#xff0c;这些包括密码、用户名、员工 ID、手机号码、安全答案等。 这些身份通常存储在 Active Directory 等目录中&#xff0c;并使…
阅读更多...
EM planner 论文阅读

EM planner 论文阅读

论文题目&#xff1a;Baidu Apollo EM Motion Planner 0 前言 EM和Lattice算法对比 EM plannerLattice Planner参数较多&#xff08;DP/QP&#xff0c;Path/Speed&#xff09;参数少且统一化流程复杂流程简单单周期解空间受限简单场景解空间较大能适应复杂场景适合简单场景 …
阅读更多...
【分布式技术】rsync远程同步服务

【分布式技术】rsync远程同步服务

目录 一、rsync&#xff08;远程同步&#xff09; 二、实操rsync远程文件同步 准备一个服务端192.168.20.18以及一个客户端192.168.20.30 1、服务端搭建&#xff1a;先完成服务端配置&#xff0c;启动服务 rsync拓展 1、关于rsyncd服务的端口号 2、rsync和scp的区别 2、测…
阅读更多...
企业级进销存管理系统

企业级进销存管理系统

框架&#xff1a; 进销存管理系统&#xff0c;采用SpringBootShiroMyBatisEasyUI 项目采用Maven构建&#xff0c;数据库文件存放在 sql/jxc.sql 截图 运行项目部分截图&#xff0c; 登录界面&#xff0c;用户名admin&#xff0c;密码admin123 当前库存查询&#xff0c; 进…
阅读更多...
UI自动化测试工具对企业具有重要意义

UI自动化测试工具对企业具有重要意义

随着软件行业的不断发展&#xff0c;企业对高质量、高效率的软件交付有着越来越高的要求。在这个背景下&#xff0c;UI自动化测试工具成为了企业不可或缺的一部分。以下是UI自动化测试工具对企业的重要作用&#xff1a; 1. 提高软件质量 UI自动化测试工具能够模拟用户的操作&am…
阅读更多...
《堆排序》与《Top—k》

《堆排序》与《Top—k》

目录 ​编辑 前言&#xff1a; 关于《堆排序》&#xff1a; 第一步&#xff1a;建堆 第二步&#xff1a;排序 《Top—K问题》 关于Top—k问题&#xff1a; 前言&#xff1a; 我们在前面的blog中&#xff0c;对于《堆》已经有了初步的概念&#xff0c;那么接下来我们可以…
阅读更多...
mapper向mapper.xml传参中文时的乱码问题

mapper向mapper.xml传参中文时的乱码问题

1.起因&#xff1a; 在idea中进行模糊查询传参时&#xff0c;发现在idea中查中文查不出记录&#xff0c;在navicate中可以查出来。 2.猜测&#xff1a; 1.idea中的编码问题导致的乱码。 2.idea和navicate的编码一致性导致的乱码。 3.mapper向mapper.xml传参后出现乱码。 3.解…
阅读更多...
Transformer从菜鸟到新手(六)

Transformer从菜鸟到新手(六)

引言 上篇文章介绍了如何在多GPU上分布式训练&#xff0c;本文介绍大模型常用的一种推理加速技术——KV缓存。 KV Cache KV缓存(KV Cache)是在大模型推理中常用的一种技巧。我们知道在推理阶段&#xff0c;Transformer也只能像RNN一样逐个进行预测&#xff0c;也称为自回归。…
阅读更多...
IPv6路由协议---IS-ISv6

IPv6路由协议---IS-ISv6

IS-ISv6概述 中间系统到中间系统IS-ISv6（Intermediate System to Intermediate System）属于内部网关协议IGP（Interior Gateway Protocol），用于自治系统内部。IS-IS也是一种链路状态协议，使用最短路径优先SPF（Shortest Path First）算法进行路由计算。 IS-ISv6产生 IS…
阅读更多...
代码随想录刷题笔记（DAY 10）

代码随想录刷题笔记（DAY 10）

今日总结&#xff1a;快要期末考试了&#xff0c;现在在疯狂速成&#xff0c;今天稍微缓和了一点&#xff0c;应该能保证继续每天刷题&#xff0c;欠下的那些寒假补上。 Day 10 01. 用栈实现队列&#xff08;No. 232&#xff09; 题目链接 代码随想录题解 1.1 题目 请你仅…
阅读更多...
Deep Reinforment Learning Note 1

Deep Reinforment Learning Note 1

文章目录 Terminology Terminology st : stateot : observationat : action π θ ( a t ∣ o t ) \pi_\theta (a_t | o_t) πθ​(at​∣ot​) : policy π θ ( a t ∣ s t ) \pi_\theta (a_t | s_t) πθ​(at​∣st​) : policy (fully observed) Observation result from…
阅读更多...
[软件工具]pdf多区域OCR识别导出excel工具使用教程

[软件工具]pdf多区域OCR识别导出excel工具使用教程

首先我们打开软件&#xff0c;界面如下&#xff1a; 如上图&#xff0c;使用非常简单&#xff0c;步骤如下&#xff1a; &#xff08;1&#xff09;选择工具-取模板选择一个pdf文件划定自己需要识别的区域&#xff0c;如果你选择第2页指定区域则软件统一识别所有pdf第2页指定区…
阅读更多...
线性表入门

线性表入门

王有志&#xff0c;一个分享硬核Java技术的互金摸鱼侠加入Java人的提桶跑路群&#xff1a;共同富裕的Java人 从今天开始就进入到数据结构的部分了&#xff0c;整体分为3个部分&#xff1a;线性表&#xff0c;树和图&#xff0c;从认识每种数据结构到它们的高级应用。今天我们先…
阅读更多...
如何从 Keras 中的深度学习目录加载大型数据集

如何从 Keras 中的深度学习目录加载大型数据集

一、说明 数据集读取&#xff0c;使用、在磁盘上存储和构建图像数据集有一些约定&#xff0c;以便在训练和评估深度学习模型时能够快速高效地加载。本文介绍Keras 深度学习库中的ImageDataGenerator类等工具自动加载训练、测试和验证数据集。 二、ImageDataGenerator加载数据集…
阅读更多...
Bom 和 Dom 区别 ----- 真是DOM 和 虚拟Dom区别

Bom 和 Dom 区别 ----- 真是DOM 和 虚拟Dom区别

DOM和BOM的区别 我们都指代&#xff0c;javascript由三个部分组成&#xff1a; ECMAScript&#xff1a;描述了JS的语法和基本对象 BOM(浏览器对象)&#xff1a;与浏览器交互的方法和对象 DOM(文档对象模型)&#xff1a;处理网页内容的方法和接 ps&#xff1a;根据宿主&#x…
阅读更多...
数学经典教材有什么？

数学经典教材有什么？

有本书叫做《自然哲学的数学原理》&#xff0c;是牛顿写的&#xff0c;读完之后你就会感叹牛顿的厉害之处! 原文完整版PDF&#xff1a;https://pan.quark.cn/s/5d5eac2e56af 那玩意真的是人写出来的么… 现代教材把牛顿力学简化成三定律&#xff0c;当然觉得很简单。只有读了原…
阅读更多...
并发前置知识一：线程基础

并发前置知识一：线程基础

一、通用的线程生命周期&#xff1a;“五态模型” 二、java线程有哪几种状态&#xff1f; New&#xff1a;创建完线程Runable&#xff1a;start(),这里的Runnable包含操作的系统的Running&#xff08;运行状态&#xff09;和Ready&#xff08;上面的可运行状态&#xff09;Blo…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023