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 刷新…...
告别龟速成像：手把手教你用Python实现FBP算法的子孔径并行加速（附代码）
告别龟速成像：手把手教你用Python实现FBP算法的子孔径并行加速（附代码） 雷达成像技术在现代遥感领域扮演着至关重要的角色，而快速后向投影(FBP)算法作为合成孔径雷达(SAR)成像的核心方法之一，其计算效率直接决定了实际…...
Ubuntu22.04上ROS1 Noetic安装避坑指南：从编译错误到完美运行
Ubuntu 22.04上ROS1 Noetic终极安装指南：解决C17兼容性与依赖冲突 当Ubuntu 22.04成为主流开发环境时，许多机器人开发者面临一个尴尬局面：官方支持的ROS1 Noetic仅适配到Ubuntu 20.04。但现实项目中，我们常被迫在新系统上运行旧版…...
Netgear路由器Telnet功能启用工具：技术解析与实践指南
Netgear路由器Telnet功能启用工具：技术解析与实践指南 【免费下载链接】netgear_telnet Netgear Enable Telnet (New Crypto) 项目地址: https://gitcode.com/gh_mirrors/ne/netgear_telnet 一、功能价值：技术突破点与应用场景 1.1 核心功能概述…...
新手必看！5款热门单片机选型指南（51、STM32、PIC、AVR、MSP430）
新手工程师必读：5大单片机选型实战指南（51/STM32/PIC/AVR/MSP430） 第一次打开单片机选型手册时，密密麻麻的参数表就像天书——时钟频率、Flash容量、ADC精度这些术语在眼前跳动，而老板给的采购预算表上的数字又让人手…...
零基础玩转CosyVoice：3步完成声音克隆，制作专属语音祝福
零基础玩转CosyVoice：3步完成声音克隆，制作专属语音祝福 1. 引言：让声音成为你的专属礼物 你有没有想过，用自己或亲友的声音，生成一段独一无二的语音祝福？比如，用妈妈的声音说“生日快乐”&am…...
微信数据库密钥自动获取：从手动繁琐到一键提取的技术革新
微信数据库密钥自动获取：从手动繁琐到一键提取的技术革新 【免费下载链接】PyWxDump 获取微信账号信息(昵称/账号/手机/邮箱/数据库密钥/wxid)；PC微信数据库读取、解密脚本；聊天记录查看工具；聊天记录导出为html(包含语音图片)。支…...
SlopeCraft：Minecraft地图艺术创作的高效解决方案
SlopeCraft：Minecraft地图艺术创作的高效解决方案 【免费下载链接】SlopeCraft Map Pixel Art Generator for Minecraft 项目地址: https://gitcode.com/gh_mirrors/sl/SlopeCraft 在Minecraft的方块世界中，将现实中的图像转化为立体地图艺术一直…...
GPU vs TPU vs FPGA：三大AI芯片实战对比，哪个更适合你的项目？
GPU vs TPU vs FPGA：三大AI芯片实战对比，哪个更适合你的项目？ 当你在深夜调试模型时，是否曾被"OOM"错误折磨得抓狂？或是看着电费账单上那个惊人的数字陷入沉思？选择正确的AI加速芯片，…...
技术赋能B端拓客：号码核验行业的破局与价值深耕，氪迹科技法人股东核验筛选系统，阶梯式价格
2026年，B端市场进入存量竞争的深水区，“精准获客、降本增效”不再是企业的加分项，而是生存发展的必选项。号码核验作为B端拓客流程的前置筛选环节，直接决定了线索质量、人力效能与投入回报比，成为影响企业拓客竞争力的…...
三步搞定！用bilidown轻松下载B站8K超清视频的完整指南
三步搞定！用bilidown轻松下载B站8K超清视频的完整指南 【免费下载链接】bilidown 哔哩哔哩视频解析下载工具，支持 8K 视频、Hi-Res 音频、杜比视界下载、批量解析，可扫码登录，常驻托盘。 项目地址: https://gitcode.com/gh_mirr…...