Canvas绘制简易雨滴碰撞效果
实现会动的图形，向下播放多张静态的图片。一秒内要大于屏幕刷新的帧数(60) 也就是每隔1/60s执行一次函数在每次绘制的正方形上添加一个背景色为白色蒙板。
效果图
源代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Canvas雨滴效果</title><style>body {margin: 0;}.rain {display: block;background-color: #000;}</style>
</head><body><canvas class="rain"></canvas><script>// 1.获取canvas并设置大小var canvas = document.querySelector('.rain');var ctxWidth, ctxHeight; // 定义画布的宽高~~function setResize() { // 根据浏览器窗口的改变，实时改变canvas画布的宽高，和浏览器保持一致window.onresize = arguments.callee;ctxWidth = window.innerWidth;ctxHeight = window.innerHeight;canvas.width = ctxWidth;canvas.height = ctxHeight;}();var ctx = canvas.getContext('2d');// 2.绘制单个会动的雨滴，根据单个雨滴进行接下来的雨滴对象Rain处理/* var y = 10;setInterval(function () {// 添加雨滴蒙版，使用透明色，使雨滴向上看起来有逐渐透明的效果ctx.fillStyle = 'rgba(0,0,0,0.05)';ctx.fillRect(0, 0, ctxWidth, ctxHeight);//绘制雨滴小矩形ctx.fillStyle = 'blue';ctx.fillRect(10, y++, 4, 10);}, 1000 / 60); */function random(min, max) { // 生成从min到max之间的随机数return Math.random() * (max - min) + min;}// 3.设置雨滴对象function Rain() { };Rain.prototype = {init: function () {this.x = random(0, ctxWidth);this.y = 0;this.vY = random(4, 5); // 雨滴在Y轴上运动的速度this.h = random(0.8 * ctxHeight, 0.9 * ctxHeight); // 雨滴停止的Y轴位置，整个画布的80%-90%高度的地方this.r = 1; // 圆形半径this.vR = 1; // 圆形半径变化的速度},draw: function () {if (this.y <= this.h) {//绘制雨滴小矩形ctx.beginPath();ctx.fillStyle = '#31f7f7';ctx.fillRect(this.x, this.y, 4, 10);} else {ctx.beginPath();ctx.strokeStyle = '#31f7f7';ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);ctx.stroke();}},move: function () {if (this.y <= this.h) {this.y += this.vY;} else {if (this.r <= 100) {this.r += this.vR;}else {this.init();}}this.draw();}}// 创建多个雨滴的函数，将雨滴push进入arrRains中var arrRains = [];function createRain(num) {// 每200ms生成一滴雨滴for (var i = 0; i <= num; i++) {setTimeout(function () {var rain = new Rain();rain.init();rain.draw();arrRains.push(rain);}, 200 * i);}}createRain(50);setInterval(function () {// 添加雨滴蒙版，使用透明色，使雨滴向上看起来有逐渐透明的效果ctx.fillStyle = 'rgba(0,0,0,0.05)';ctx.fillRect(0, 0, ctxWidth, ctxHeight);for (item of arrRains) {item.move();}}, 1000 / 60); // 每1/60秒执行一次函数</script>
</body></html>相关文章：
Canvas绘制简易雨滴碰撞效果
实现会动的图形，向下播放多张静态的图片。一秒内要大于屏幕刷新的帧数(60) 也就是每隔1/60s执行一次函数在每次绘制的正方形上添加一个背景色为白色蒙板。 效果图 源代码 <!DOCTYPE html> <html lang"en"><head><meta charset"…...
【五、http】go的http的信息提交
一、post提交的几种 form表单json文件 1、提交表单 //http的postfunc requstPost(){params : make(url.Values)params.Set("name", "kaiyue")params.Set("age", "18")formDataStr : []byte(params.Encode())formDataByte : bytes.N…...
第六讲:VBA与ACCESS的ADO连接中，所涉及的对象
《VBA数据库解决方案》教程（10090845）是我推出的第二套教程，目前已经是第二版修订了。这套教程定位于中级，是学完字典后的另一个专题讲解。数据库是数据处理的利器，教程中详细介绍了利用ADO连接ACCDB和EXCEL的方法和实…...
【计算机网络】同源策略及跨域问题
1. 同源策略 同源策略是一套浏览器安全机制，当一个源的文档和脚本，与另一个源的资源进行通信时，同源策略就会对这个通信做出不同程度的限制。 同源策略对 同源资源 放行，对 异源资源 限制。因此限制造成的开发问题，称…...
uniapp在APP端使用swiper进行页面不卡顿滑动
uniapp在APP端使用swiper进行页面会卡顿，主要是渲染的数据有点多，这里只渲染三个数据就不好那么卡顿了，每次滑动后更新数据 <view><swiper change"changePoint" circular :disable-touch"disableTouch"><…...
遗憾
《遗憾》 文／罗光记 岁月匆匆如梦过， 回首往事泪沾裳。 遗憾犹存心深处， 青春岁月已成伤。...
hustoj 平台
1.大部分功能和选项的开关和参数调整都在配置文件中，安装后几个重要配置文件的位置如下： /home/judge/etc/judge.conf #判题judged/judge_client /home/judge/src/web/include/db_info.inc.php #Web debian-sys-maint gdfNPYOdITxtDEK1 修改MySQl管…...
如何使用Scrapy提取和处理数据
目录 一、安装和设置Scrapy 二、创建爬虫 三、提取数据 四、处理数据 五、存储数据 六、进阶操作 七、注意事项 总结 Scrapy是一个强大且灵活的Python库，用于创建网页爬虫，提取和处理数据。本文将为您深入讲解如何使用Scrapy进行数据处理&#x…...
拟合与过拟合
拟合跟过拟合 过拟合：将泛化误差分解为偏差跟方差 偏差：学习者不断学习相同错误事物的倾向 方差：学习随机信号而不考虑真实情况的趋势 过拟合:所建的机器学习模型或者深度学习模型在训练样本中表现得过于优越，导致测试数据集表现…...
科学化决策数据分析，先从量化开始
在当今信息爆炸的时代，数据已经成为我们生活和工作中不可或缺的一部分。在各行各业，人们越来越依赖数据来指导决策和优化业务。在这个背景下，量化成为了一种重要的方法论，通过收集、分析和解读数据，为我们提供了更准确…...
使用Docker搭建一个“一主两从”的 Redis 集群（超详细步骤）
目录 1、Redis 单机版安装1.1 拉取 Redis1.2 创建数据卷目录1.3 修改 redis.conf1.4 启动 Redis 容器1.5 进入容器连接 Redis 2、Redis 一主两从集群搭建2.1 复制三份 redis.conf2.2 启动 master2.3 启动 两个redis slave2.4 三者关系查看2.5 数据测试 1、Redis 单机版安装 1.…...
阿里云盘第三方linux客户端“小白羊”云盘“Aria2本地连接已断开”错误的解决方法
简介 随着数据的不断增长，我们需要更大的存储空间来保存我们的信息。阿里云盘是阿里巴巴推出的一款云存储服务，它提供了大量可扩展的存储空间。然而，阿里云盘官方没有提供Linux操作系统的客户端。 在这种情况下，“小白羊”云盘…...
Linux flock和fcntl函数详解
文章目录 flock函数描述返回值和错误码笔记 fcntl函数描述复制文件描述符文件描述标志文件状态标志 咨询锁强制锁管理信号租赁文件和目录变更通知改变管道容量 返回值错误备注遗留问题 flock函数 主要功能是在已打开的文件应用或者删除共享锁或者独占锁。sys/file.h声明了这个…...
React 组件点击事件
点击事件 点击事件方式1、传统类方法（不推荐）2、传统类方法 16.3.0 - 自动绑定（不推荐）3、箭头函数3.1、类组件3.2、函数组件3.3、内联箭头函数 4、useState Hook 点击事件方式 1、传统类方法（不推荐） 当…...
Windows 下编译 TensorFlow 2.9.1 CC库
参考 Intel 的 tensorflow 编译指导，不过项目还是可以用 TF原本的，不是一定要选择Intel 的TF版本。 安装 MSVC 2019 安装 Intel OneDNN OneMKL 似乎也可以不安装 ( & ) https://www.intel.cn/content/www/cn/zh/developer/articles/tool/one…...
Databricks 入门之连接外部数据库
连接方式应该很多，现在记录本人目前学习到的一种方式。 一、读取外部数据库 1.notebook执行语言为sql时可以通过JDBC方式加载数据库数据。 以下代码将可以将sqlserver中的表加载到databricks视图中，当然也可创建表来接收外部数据。 %sqlCREATE TEMPOR…...
家庭互动新维度：TikTok的亲子体验
在数字时代，家庭互动的方式正在发生翻天覆地的改变。社交媒体平台TikTok崭露头角，不仅在年轻用户中广受欢迎，还为家庭带来了全新的互动维度。本文将深入探讨TikTok如何成为家庭互动的新元素，以及它如何改变亲子体验。 TikTok&…...
redis教程 一 redis中的常用命令
文章目录 redis常见命令Redis数据结构介绍redis通用命令String类型String的常见命令Key结构 Hash类型List类型Set类型SortedSet类型 redis常见命令 Redis数据结构介绍 Redis是一个key-value的数据库，key一般是String类型，不过value的类型多种多样&…...
【第28例】IPD体系进阶 | 需求管理：需求实现过程
目录 简介 内容详解 CSDN学院相关推荐 作者简介 简介 继续 IPD 体系中的需求管理相关的专题。 先来看看整个需求管理涉及的过程内容： 需求管理流程主要包含五个阶段： 需求收集； 需求分析； 需求分发/分配；...
聊聊我对AI Agents技术的一些看法
小伙伴们！我来兑现承诺啦～ ps：接下来期待什么内容，欢迎在评论区留言！ 今天，我们就来聊聊大模型 Agent。 最近这几个月，Agent 这一概念可谓火出天际，从 AutoGPT 一周 6 万 star 刷新…...
linux之kylin系统nginx的安装
一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源（HTML/CSS/图片等），响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址，提高安全性 3.负载均衡服务器 支持多种策略分发流量…...
条件运算符
C中的三目运算符（也称条件运算符，英文：ternary operator）是一种简洁的条件选择语句，语法如下： 条件表达式 ? 表达式1 : 表达式2• 如果“条件表达式”为true，则整个表达式的结果为“表达式1”…...
【决胜公务员考试】求职OMG——见面课测验1
2025最新版！！！6.8截至答题，大家注意呀！ 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:（ B ） A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...
全志A40i android7.1 调试信息打印串口由uart0改为uart3
一，概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本：2014.07； Kernel版本：Linux-3.10； 二，Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01)，并让boo…...
中关于正整数输入的校验规则)
Element Plus 表单(el-form)中关于正整数输入的校验规则
目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入（联动）2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...
Linux --进程控制
本文从以下五个方面来初步认识进程控制： 目录 进程创建 进程终止 进程等待 进程替换 模拟实现一个微型shell 进程创建 在Linux系统中我们可以在一个进程使用系统调用fork()来创建子进程，创建出来的进程就是子进程，原来的进程为父进程。…...
html css js网页制作成品——HTML+CSS榴莲商城网页设计（4页）附源码
目录 一、👨🎓网站题目 二、✍️网站描述 三、📚网站介绍 四、🌐网站效果 五、🪓 代码实现 🧱HTML 六、🥇 如何让学习不再盲目 七、🎁更多干货 一、👨…...
Java + Spring Boot + Mybatis 实现批量插入
在 Java 中使用 Spring Boot 和 MyBatis 实现批量插入可以通过以下步骤完成。这里提供两种常用方法：使用 MyBatis 的 <foreach> 标签和批处理模式（ExecutorType.BATCH）。 方法一：使用 XML 的 <foreach> 标签ÿ…...
Python基于历史模拟方法实现投资组合风险管理的VaR与ES模型项目实战
说明：这是一个机器学习实战项目（附带数据代码文档），如需数据代码文档可以直接到文章最后关注获取。 1.项目背景 在金融市场日益复杂和波动加剧的背景下，风险管理成为金融机构和个人投资者关注的核心议题之一。VaR&…...
毫米波雷达基础理论（3D+4D）
3D、4D毫米波雷达基础知识及厂商选型 PreView : https://mp.weixin.qq.com/s/bQkju4r6med7I3TBGJI_bQ 1. FMCW毫米波雷达基础知识 主要参考博文： 一文入门汽车毫米波雷达基本原理 ：https://mp.weixin.qq.com/s/_EN7A5lKcz2Eh8dLnjE19w 毫米波雷达基础…...