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 刷新…...
B站视频转文字终极指南：如何用AI工具3步搞定视频内容整理
B站视频转文字终极指南：如何用AI工具3步搞定视频内容整理 【免费下载链接】bili2text Bilibili视频转文字，一步到位，输入链接即可使用 项目地址: https://gitcode.com/gh_mirrors/bi/bili2text 你是否曾为了一段精彩的B站课程内容反复…...
暖风机如何实现稳定高效的采暖输出？
一、核心结论NT‑5TS型暖风机可依托标准化结构与性能参数，满足常规工业空间采暖供热需求，整体运行能耗合理、散热效率稳定，适配多场景采暖工况。该设备经暖通设备性能检测标准核验，在额定工况下各项指标均达到行业通用使用要求&am…...
拯救者工具箱：从系统瓶颈到性能释放的全面硬件控制方案
拯救者工具箱：从系统瓶颈到性能释放的全面硬件控制方案 【免费下载链接】LenovoLegionToolkit Lightweight Lenovo Vantage and Hotkeys replacement for Lenovo Legion laptops. 项目地址: https://gitcode.com/gh_mirrors/le/LenovoLegionToolkit 当你手握…...
告别手动画图！用Perl脚本自动化统计MS动力学模拟中的氢键（附脚本下载）
用Perl脚本实现MS动力学模拟中氢键的自动化统计与分析 在分子动力学模拟研究中，氢键作为影响材料性能的关键因素之一，其动态变化规律往往需要从海量轨迹数据中提取。传统手动分析方法不仅效率低下，还容易引入人为误差。本文将介绍如何利用Per…...
YOLOv8安全帽识别检测系统（项目源码+YOLO数据集+模型权重+UI界面+python+深度学习+环境配置）
摘要 为有效监测施工现场安全帽佩戴情况，本研究基于YOLOv8目标检测算法构建了一套安全帽检测系统。数据集共包含5000张图像，涵盖helmet（安全帽）与head（未戴安全帽的头部）两类目标，其中训练集35…...
i.MX8MP多核异构处理器外设资源管理：从RDC到SEMA42的实战指南
1. 多核异构处理器的资源管理挑战与核心思路在嵌入式系统开发领域，尤其是高性能应用场景，多核异构处理器正变得越来越普遍。这类处理器通常将高性能应用处理器（如 Arm Cortex-A 系列）与实时微控制器（如 Arm Cortex-M 系…...
用Obsidian+Templater插件打造你的专属日记系统：从脚本编写到自动归档
用ObsidianTemplater打造全自动日记管理系统：从脚本开发到智能归档 在数字时代，个人知识管理已成为现代人的必修课。当大多数日记应用将你的私人记忆锁在云端服务器时，一种更自主、更灵活的选择正在技术爱好者中流行——用Obsidian配合Templa…...
从零到一：用面包板和晶体管手搓一个4bit加法器（附完整电路图与避坑指南）
从零到一：用面包板和晶体管手搓一个4bit加法器（附完整电路图与避坑指南） 深夜的实验室里，面包板上横七竖八地插着几十个三极管和电阻，当我第三次测量到错误的输出电平时，终于意识到——这个看似简单的4bit加…...
Cadence SPB17.4导入外部封装后，原理图封装属性不更新？一个属性编辑框解决你的困扰
Cadence SPB17.4原理图封装属性更新难题：从数据库到设计的完整解决方案 当你花费数小时将力创封装库成功导入Cadence PCB Editor后，满心欢喜地打开原理图进行DRC检查，却发现那些熟悉的"PCB Footprint Not Found"错误依然存在——这…...
Few-shot vid2vid自定义数据集训练指南：从标签图到真实视频的转换
Few-shot vid2vid自定义数据集训练指南：从标签图到真实视频的转换 【免费下载链接】few-shot-vid2vid Pytorch implementation for few-shot photorealistic video-to-video translation. 项目地址: https://gitcode.com/gh_mirrors/fe/few-shot-vid2vid Few…...