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 刷新…...
Cinnamon修改面板小工具图标
Cinnamon开始菜单-CSDN博客 设置模块都是做好的，比GNOME简单得多！ 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...
ElasticSearch搜索引擎之倒排索引及其底层算法
文章目录 一、搜索引擎1、什么是搜索引擎？2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长，文件大。2.其次，树深，IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...
Axios请求超时重发机制
Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式： 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...
重启Eureka集群中的节点，对已经注册的服务有什么影响
先看答案，如果正确地操作，重启Eureka集群中的节点，对已经注册的服务影响非常小，甚至可以做到无感知。 但如果操作不当，可能会引发短暂的服务发现问题。 下面我们从Eureka的核心工作原理来详细分析这个问题。 Eureka的…...
视频行为标注工具BehaviLabel（源码+使用介绍+Windows.Exe版本）
前言： 最近在做行为检测相关的模型，用的是时空图卷积网络（STGCN），但原有kinetic-400数据集数据质量较低，需要进行细粒度的标注，同时粗略搜了下已有开源工具基本都集中于图像分割这块，…...
基于TurtleBot3在Gazebo地图实现机器人远程控制
1. TurtleBot3环境配置 # 下载TurtleBot3核心包 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src git clone -b noetic-devel https://github.com/ROBOTIS-GIT/turtlebot3.git git clone -b noetic https://github.com/ROBOTIS-GIT/turtlebot3_msgs.git git clone -b noetic-dev…...
Windows安装Miniconda
一、下载 https://www.anaconda.com/download/success 二、安装 三、配置镜像源 Anaconda/Miniconda pip 配置清华镜像源_anaconda配置清华源-CSDN博客 四、常用操作命令 Anaconda/Miniconda 基本操作命令_miniconda创建环境命令-CSDN博客...
解读《网络安全法》最新修订，把握网络安全新趋势
《网络安全法》自2017年施行以来，在维护网络空间安全方面发挥了重要作用。但随着网络环境的日益复杂，网络攻击、数据泄露等事件频发，现行法律已难以完全适应新的风险挑战。 2025年3月28日，国家网信办会同相关部门起草了《网络安全…...
永磁同步电机无速度算法--基于卡尔曼滤波器的滑模观测器
一、原理介绍 传统滑模观测器采用如下结构： 传统SMO中LPF会带来相位延迟和幅值衰减，并且需要额外的相位补偿。 采用扩展卡尔曼滤波器代替常用低通滤波器(LPF)，可以去除高次谐波，并且不用相位补偿就可以获得一个误差较小的转子位…...
uniapp 集成腾讯云 IM 富媒体消息（地理位置/文件）
UniApp 集成腾讯云 IM 富媒体消息全攻略（地理位置/文件） 一、功能实现原理 腾讯云 IM 通过 消息扩展机制 支持富媒体类型，核心实现方式： 标准消息类型：直接使用 SDK 内置类型（文件、图片等）自…...