粒子向上持续瀑布动画效果(直接粘贴到记事本改html即可)

代码: 根据个人喜好修改即可

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>宽粒子向上效果</title><style>body {margin: 0;overflow: hidden;background-color: black;}canvas {display: block;}</style>
</head>
<body><canvas id="flameCanvas"></canvas><script>const canvas = document.getElementById('flameCanvas');const ctx = canvas.getContext('2d');canvas.width = window.innerWidth;canvas.height = window.innerHeight;class Particle {constructor(x, y) {this.x = x;this.y = y;this.size = Math.random() * 10 + 5; // 粒子大小this.speedY = Math.random() * -4 - 2; // 向上速度this.speedX = (Math.random() - 0.5) * 2; // 水平随机速度this.color = `rgba(255, ${Math.floor(Math.random() * 100) + 155}, 0, 0.8)`; // 橙色this.friction = 0.98; // 摩擦力}update() {this.x += this.speedX;this.y += this.speedY;this.size *= this.friction; // 粒子逐渐变小if (this.size < 0.5) {this.size = 0; // 粒子消失}}draw() {ctx.fillStyle = this.color;ctx.beginPath();ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);ctx.fill();}}class Flame {constructor(x, width) {this.x = x;this.width = width;this.particles = [];this.particleCount = 40; // 每次生成的粒子数量}update() {// 生成新粒子for (let i = 0; i < this.particleCount; i++) {const particleX = this.x + (Math.random() - 0.5) * this.width; // 生成在宽度范围内this.particles.push(new Particle(particleX, canvas.height));}// 更新粒子位置this.particles.forEach((particle, index) => {particle.update();if (particle.size <= 0) {this.particles.splice(index, 1); // 移除消失的粒子}});}draw() {this.particles.forEach(particle => {particle.draw();});}}const flames = [];const flameWidth = canvas.width * 0.6; // 宽度为屏幕的50%// 创建一束宽粒子flames.push(new Flame(canvas.width / 2, flameWidth));function animate() {ctx.clearRect(0, 0, canvas.width, canvas.height);flames.forEach(flame => {flame.update();flame.draw();});requestAnimationFrame(animate);}animate();</script>
</body>
</html>

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

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

相关文章

正则表达式匹配整数与浮点数失败与解决方案

正则表达式匹配整数与浮点数失败与解决方案 问题描述问题分析解决方案总结 问题描述 在处理数据的时候需要提取文本内整数与浮点数&#xff0c;这个时候想到使用正则表达式&#xff0c;咨询百度文心一言给出以下方案及参考代码 import re text "我有100元&#xff0c;…

解决mac下 Android Studio gradle 下载很慢,如何手动配置

抓住人生中的一分一秒&#xff0c;胜过虚度中的一月一年! 小做个动图开篇引题 前言 平时我们clone git 上项目&#xff0c;项目对应gradle版本本地没有&#xff0c;ide编译会自动下载&#xff0c;但是超级慢可能还下载失败&#xff0c;下面讲解下此问题如 如下图所示&#xff…

ML 系列:机器学习和深度学习的深层次总结(04)多元线性回归 (MLR)

图 1.多元线性回归与简单线性回归 一、说明 线性回归从一维推广到多维&#xff0c;这与单变量线性回归有很多不同&#xff0c;情况更加复杂&#xff0c;而在梯度优化也需要改成向量梯度&#xff0c;同时&#xff0c;数据预处理也成了必要步骤。 二、综述 多元线性回归是简单线性…

【AI算法岗面试八股面经【超全整理】——深度学习】

AI算法岗面试八股面经【超全整理】 概率论【AI算法岗面试八股面经【超全整理】——概率论】信息论【AI算法岗面试八股面经【超全整理】——信息论】机器学习【AI算法岗面试八股面经【超全整理】——机器学习】深度学习【AI算法岗面试八股面经【超全整理】——深度学习】CVNLP …

【RabbitMQ】⾼级特性

RabbitMQ ⾼级特性 1. 消息确认1.1 消息确认机制1.2 代码示例 2. 持久化2.1 交换机持久化2.2 队列持久化2.3 消息持久化 3. 发送⽅确认3.1 confirm确认模式3.2 return退回模式3.3 问题: 如何保证RabbitMQ消息的可靠传输? 4. 重试机制5. TTL5.1 设置消息的TTL5.2 设置队列的TTL…

vue3集成google第三方登陆

网上资源很多&#xff0c;但乱七八糟&#xff0c;踩坑几小时后&#xff0c;发现下面的方式没问题。 npm install vue3-google-login 插件文档&#xff1a;vue3-google-登录 (devbaji.github.io) 修改main.js import ./assets/main.css import { createApp } from vue impor…

医院伤员消费点餐限制———未来之窗行业应用跨平台架构

一、点餐上限 医院点餐上限具有以下几方面的意义&#xff1a; 1. 控制成本 - 有助于医院合理规划餐饮预算&#xff0c;避免食物的过度供应造成浪费&#xff0c;从而降低餐饮成本。 2. 保障饮食均衡 - 防止患者或陪护人员过度点餐某一类食物&#xff0c;有利于引导合…

【AcWing】873. 欧拉函数

#include<iostream> using namespace std;int main(){int n;cin>>n;while(n--){int x;cin>>x;int resx;for(int i2;i<x/i;i){if(x%i0){//resres*(1-1/i);整数1/i等于0&#xff0c;算不对且会溢出//以下几种都能ac//resres/i*(i-1);i*(1-1/i)i-1&#xff0…

[JavaEE] TCP协议

目录 一、TCP协议段格式 二、TCP确保传输可靠的机制 2.1 确认应答 2.2 超时重传 2.3 连接管理 2.3.1 三次握手 2.3.2 四次挥手 2.4 滑动窗口 2.4.1 基础知识 2.4.2 两种丢包情况 2.4.2.1 数据报已经抵达&#xff0c;ACK丢包 2.4.2.2 数据包丢包 2.5 流量控制…

音视频入门基础:AAC专题(7)——FFmpeg源码中计算AAC裸流每个packet的size值的实现

音视频入门基础&#xff1a;AAC专题系列文章&#xff1a; 音视频入门基础&#xff1a;AAC专题&#xff08;1&#xff09;——AAC官方文档下载 音视频入门基础&#xff1a;AAC专题&#xff08;2&#xff09;——使用FFmpeg命令生成AAC裸流文件 音视频入门基础&#xff1a;AAC…

Vue3:v-model实现组件通信

目录 一.性质 1.双向绑定 2.语法糖 3.响应式系统 4.灵活性 5.可配置性 6.多属性绑定 7.修饰符支持 8.defineModel使用 二.使用 1.父组件 2.子组件 三.代码 1.父组件代码 2.子组件代码 四.效果 一.性质 在Vue3中&#xff0c;v-model指令的性质和作用主要体现在…

AI健身之俯卧撑计数和姿态矫正-角度估计

在本项目中&#xff0c;实现了Yolov7-Pose用于人体姿态估计。以下是如何在Windows 11操作系统上设置和运行该项目的详细步骤。 环境准备 首先&#xff0c;确保您的计算机已经安装了Anaconda。Anaconda是一个开源的Python发行版本&#xff0c;它包含了conda、Python以及众多科…

【滑动窗口】算法总结

文章目录 滑动窗口算法总结1.暴力求解vs滑动窗口2.需要注意的细节问题 2.滑动窗口的基本模板1.非固定窗口大小的滑动窗口2.固定窗口大小的滑动窗口细节 滑动窗口算法总结 1.暴力求解vs滑动窗口 遇到那些可以转化成一个子数组的长度的问题时&#xff0c;往往需要用到双指针。 …

安全基础学习-AES128加密算法

前言 AES&#xff08;Advanced Encryption Standard&#xff09;是对称加密算法的一个标准&#xff0c;主要用于保护电子数据的安全。AES 支持128、192、和256位密钥长度&#xff0c;其中AES-128是最常用的一种&#xff0c;它使用128位&#xff08;16字节&#xff09;的密钥进…

探索人工智能绘制宇宙地图的实现

人工智能 (AI) 已成为了解世界的重要工具。现在&#xff0c;随着人们对太空探索的兴趣重新升温&#xff0c;人工智能也可能对其他世界产生同样的影响。 尽管经过了几十年的研究&#xff0c;科学家们对地球大气层以外的宇宙仍然知之甚少。绘制行星、恒星、星系及其在太空中的运…

python爬虫初体验(一)

文章目录 1. 什么是爬虫&#xff1f;2. 为什么选择 Python&#xff1f;3. 爬虫小案例3.1 安装python3.2 安装依赖3.3 requests请求设置3.4 完整代码 4. 总结 1. 什么是爬虫&#xff1f; 爬虫&#xff08;Web Scraping&#xff09;是一种从网站自动提取数据的技术。简单来说&am…

安卓14剖析SystemUI的ShadeLogger/LogBuffer日志动态控制输出dumpsy机制

背景&#xff1a; 看SystemUI的锁屏相关代码时候发现SystemUI有一个日志打印相关的方法调用&#xff0c;相比于常规的Log.i直接可以logcat查看方式还是比较新颖。 具体日志打印代码如下&#xff1a; 下面就来介绍一下这个ShadeLogger到底是如何打印的。 分析源码&#xff1…

前端JavaScript导出excel,并用excel分析数据,使用SheetJS导出excel

前言&#xff1a;哈喽&#xff0c;大家好&#xff0c;今天给大家分享今天给大家分享一篇文章&#xff01;并提供具体代码帮助大家深入理解&#xff0c;彻底掌握&#xff01;创作不易&#xff0c;如果能帮助到大家或者给大家一些灵感和启发&#xff0c;欢迎收藏关注哦 &#x1f…

OpenWrt 定时重启

问题 想设置 OpenWrt 定时重启&#xff0c;避免因长期不重启导致的问题。 方法 参考 Scheduling tasks with cronopenwrt设置定时重启&#xff08;天/周/月&#xff09;定时重启openwrt (istoreos) 软路由系统 设置 cron 自启动 System - Start up - 找到 cron - 设置成自…

stm32单片机个人学习笔记5(OLED调试工具)

前言 本篇文章属于stm32单片机&#xff08;以下简称单片机&#xff09;的学习笔记&#xff0c;来源于B站教学视频。下面是这位up主的视频链接。本文为个人学习笔记&#xff0c;只能做参考&#xff0c;细节方面建议观看视频&#xff0c;肯定受益匪浅。 STM32入门教程-2023版 细…