canvas实现代码雨

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

 效果图:

 全部代码:

<!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.devicePixelRatioconsole.log(width)console.log(height)// 设置 canvas尺寸cvs.width = widthcvs.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>

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java静默打印PDF(可实现生产环境下服务器写入PDF模板,然后调用客户端打印机打印)

java静默打印PDF可实现生产环境下服务器写入PDF模板&#xff0c;然后调用客户端打印机打印 一、简需求实现步骤 二、代码实现0、打印模板1、服务器部分 &#xff08;端口&#xff1a;8090&#xff09;1.1、maven依赖1.2、实体1.2.1、接口返回类1.2.2、标签纸页面参数类1.2.3、P…

python爬虫1:基础知识

python爬虫1&#xff1a;基础知识 前言 ​ python实现网络爬虫非常简单&#xff0c;只需要掌握一定的基础知识和一定的库使用技巧即可。本系列目标旨在梳理相关知识点&#xff0c;方便以后复习。 目录结构 文章目录 python爬虫1&#xff1a;基础知识1. 基础认知1.1 什么是爬虫&…

【网站搭建】开源社区Flarum搭建记录

环境 服务器系统&#xff1a;腾讯云 OpenCloudOS 宝塔版本&#xff1a;免费版8.0.1 Nginx&#xff1a;1.24.0 MySQL&#xff1a;5.7.42 PHP&#xff1a;8.1.21 萌狼蓝天 2023年8月7日 PHP设置 1.安装扩展&#xff1a;flieinfo、opcache、exif 2.解除禁用函数&#xff1a;putenv…

气体检测仪语音报警芯片,可自行烧录的音频芯片,WT588F02B-8S

近年来&#xff0c;安全问题备受关注&#xff0c;特别是涉及气体泄漏的危险场景。 为了进一步增强气体检测仪的安全功能&#xff0c;市面上便研发出了一款有害气体报警器&#xff0c;并采用WT588F02B-8S语音提示芯片为元器件&#xff0c;为产品赋予更多声音&#xff0c;更多警示…

C语言内嵌汇编

反编译&#xff08;二进制文件或者so库&#xff09; objdump --help objdump -M intel -j .text -ld -C -S out > out.txt #显示源代码同时显示行号, 代码段反汇编-M intel 英特尔语法-M x86-64-C:将C符号名逆向解析-S 反汇编的同时&#xff0c;将反汇编代码和源代码交替显…

vue-cli

vue-cli脚手架 案例一&#xff1a; 案例二&#xff1a; 案例三&#xff1a; ​ 一、脚手架简介 Vue脚手架是Vue官方提供的标准化开发工具&#xff08;开发平台&#xff09;&#xff0c;它提供命令行和UI界面&#xff0c;方便创建vue工程、配置第三方依赖、编译vue工程 1. …

【论文阅读】基于深度学习的时序异常检测——TimesNet

系列文章链接 参考数据集讲解&#xff1a;数据基础&#xff1a;多维时序数据集简介 论文一&#xff1a;2022 Anomaly Transformer&#xff1a;异常分数预测 论文二&#xff1a;2022 TransAD&#xff1a;异常分数预测 论文三&#xff1a;2023 TimesNet&#xff1a;基于卷积的多任…

【工作记录】docker安装gitlab、重置密码@20230809

前言 本文记录下基于docker安装gitlab并重置管理员密码的过程。 作为记录的同时也希望能帮助到需要的朋友们。 搭建过程 1. 准备好docker环境并启动docker [rootslave-node1 docker-gitlab]# docker version Client:Version: 18.06.1-ceAPI version: 1.38…

智慧影院--java开源电影票优惠券制作系统快速开发

搭建一个智慧影院可以通过使用Java开源电影票优惠券制作系统来快速开发。这个系统可以帮助影院管理电影票的销售和优惠活动&#xff0c;提供便捷的购票方式和优惠券的生成与使用功能。 首先&#xff0c;我们需要建立一个数据库来存储电影、影厅、放映计划、订单等信息。在数据…

模拟实现消息队列项目(系列4) -- 服务器模块(内存管理)

目录 前言 1. 创建MemoryDataCenter 2. 封装Exchange 和 Queue方法 3. 封装Binding操作 4. 封装Message操作 4.1 封装消息中心集合messageMap 4.2 封装消息与队列的关系集合queueMessageMap的操作 5. 封装未确认消息集合waitMessage的操作 6. 从硬盘中恢复数据到内存中 7. Memo…

基于ChatYuan-large-v2 语言模型 Fine-tuning 微调训练 广告生成 任务

一、ChatYuan-large-v2 ChatYuan-large-v2是一个开源的支持中英双语的功能型对话语言大模型&#xff0c;与其他 LLM 不同的是模型十分轻量化&#xff0c;并且在轻量化的同时效果相对还不错&#xff0c;仅仅通过0.7B参数量就可以实现10B模型的基础效果&#xff0c;正是其如此的…

线程概念linux

何为线程&#xff1a; 线程是程序中负责执行的单位&#xff0c;它可以被看作是进程的一部分&#xff0c;是进程的子任务。线程与进程的区别在于&#xff0c;进程是一个资源单位&#xff0c;而线程是进程的一部分&#xff0c;它只有栈这个独立的资源&#xff0c;其他资源如代码…