【JS+H5+CSS实现烟花特效】

话不多说直接上代码

注意:背景图路径是picture/star.jpg,自己在同级目录先创键picture目录再下载一张图片命名为star.jpg

HTML:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Fireworks Animation</title><link rel="stylesheet" href="style.css" /></head><body><canvas id="fireworksCanvas"></canvas><script src="script.js"></script></body>
</html>

JS:

    // 获取canvas元素const canvas = document.getElementById('fireworksCanvas');const ctx = canvas.getContext('2d');// 设置canvas宽度和高度为窗口宽度和高度canvas.width = window.innerWidth;canvas.height = window.innerHeight;let fireworks = [];// 创建烟花类class Firework {constructor() {this.x = Math.random() * canvas.width; // 随机生成烟花的起始x坐标this.y = canvas.height; // 烟花起始y坐标为画布底部this.radius = 2; // 烟花半径this.speed = 7; // 烟花上升速度this.color = 'white'; // 烟花颜色this.exploded = false; // 烟花是否已经爆炸this.particles = []; // 烟花爆炸后的粒子数组this.explosionHeight = Math.random() * (canvas.height * 0.4) + (canvas.height * 0.1); // 生成随机的爆炸高度this.initialAlpha = 1; // 初始透明度this.currentAlpha = this.initialAlpha; // 当前透明度}update() {if (!this.exploded) {this.y -= this.speed; // 烟花向上运动// 逐渐减少烟花的透明度this.currentAlpha -= 0.005;if (this.currentAlpha < 0) {this.currentAlpha = 0;}if (this.y <= this.explosionHeight) {this.explode();}} else {this.particles.forEach((particle, index) => {particle.update(); // 更新粒子的运动状态if (particle.alpha <= 0) {this.particles.splice(index, 1);}});}}draw() {ctx.beginPath(); // 开始绘制路径ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2); // 绘制一个以(x, y)为中心,半径为radius的圆ctx.fillStyle = this.color; // 设置填充颜色为烟花的颜色ctx.globalAlpha = this.currentAlpha; // 使用当前透明度ctx.fill(); // 填充圆ctx.closePath(); // 结束绘制路径if (this.exploded) {this.particles.forEach(particle => {particle.draw(); // 绘制每个粒子});}}explode() {this.exploded = true; // 设置烟花为已经爆炸状态for (let i = 0; i < 100; i++) {let particle = new Particle(this.x, this.y); // 创建一个新的粒子,位置为烟花的位置this.particles.push(particle); // 将新创建的粒子添加到烟花的粒子数组中}}}// 创建粒子类class Particle {constructor(x, y) { // 粒子类的构造函数,接收x和y坐标作为参数this.x = x; // 设置粒子的x坐标this.y = y; // 设置粒子的y坐标this.radius = 2; // 设置粒子的半径this.speedX = Math.random() * 5 - 2; // 随机生成粒子在x轴上的速度this.speedY = Math.random() * 5 - 2; // 随机生成粒子在y轴上的速度this.color = `hsl(${Math.random() * 360}, 100%, 50%)`; // 随机生成粒子的颜色this.alpha = 1.2; // 设置粒子的透明度为1.2this.fade = Math.random() * 0.02 + 0.01; // 随机生成粒子透明度的减少速度}update() { // 更新粒子的位置和透明度this.x += this.speedX; // 更新粒子的x坐标this.y += this.speedY; // 更新粒子的y坐标this.alpha -= this.fade; // 减少粒子的透明度}draw() { // 绘制粒子ctx.beginPath(); // 开始绘制路径ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2); // 绘制一个以(x, y)为中心,半径为radius的圆ctx.fillStyle = this.color; // 设置填充颜色为粒子的颜色ctx.globalAlpha = this.alpha; // 设置全局透明度为粒子的透明度ctx.fill(); // 填充圆ctx.closePath(); // 结束绘制路径}}function animate() { // 动画函数,更新画布内容并绘制烟花和粒子ctx.fillStyle = 'rgba(0, 0, 0, 0.1)'; // 设置画布背景颜色及透明度ctx.fillRect(0, 0, canvas.width, canvas.height); // 填充矩形覆盖画布fireworks.forEach((firework, index) => { // 遍历烟花数组firework.update(); // 更新烟花的位置和状态firework.draw(); // 绘制烟花及其粒子if (firework.exploded && firework.particles.length === 0) { // 如果烟花已经爆炸且没有粒子了fireworks.splice(index, 1); // 从烟花数组中移除该烟花}});requestAnimationFrame(animate); // 递归调用自身,实现连续动画效果}function init() { // 初始化函数setInterval(() => { // 每隔2秒执行一次let firework = new Firework(); // 创建一个新的烟花对象fireworks.push(firework); // 将新创建的烟花对象添加到烟花数组中}, 100);//每次循环的时间不能太长animate(); // 调用动画函数开始动画}init();

CSS:

body {margin: 0;padding: 0;overflow: hidden;background: url('picture/star.jpg') no-repeat center center fixed;background-size: cover;
}
canvas {display: block;margin: auto;position: absolute;top: 0;left: 0;right: 0;bottom: 0;opacity: 0.5; /* 设置画布的透明度为0.5 */
}

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

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

相关文章

【LLM】三、open-webui+ollama搭建自己的聊天机器人

系列文章目录 往期文章回顾&#xff1a; 【LLM】二、python调用本地的ollama部署的大模型 【LLM】一、利用ollama本地部署大模型 目录 前言 一、open-webui是什么 二、安装 1.docker安装 2.源码安装 三、使用 四、问题汇总 总结 前言 前面的文章&#xff0c;我们已经…

探索Qt的QVariant:灵活的数据交换机制

&#x1f60e; 作者介绍&#xff1a;欢迎来到我的主页&#x1f448;&#xff0c;我是程序员行者孙&#xff0c;一个热爱分享技术的制能工人。计算机本硕&#xff0c;人工制能研究生。公众号&#xff1a;AI Sun&#xff08;领取大厂面经等资料&#xff09;&#xff0c;欢迎加我的…

VMware使用技巧

目录 1. 系统快照 1.1 拍摄快照 1.2 查看快照 1.3 应用/删除快照 2. 克隆虚拟机 3. 删除虚拟机 1. 系统快照 1.1 拍摄快照 将当前系统的状态保存下来&#xff0c;如果将来系统出现不可修复的故障&#xff0c;使用快照可以恢复操作系统&#xff1b; CentOS7——拍照—…

【开源】基于RMBG的一键抠图与证件照制作系统【含一键启动包】

《博主简介》 小伙伴们好&#xff0c;我是阿旭。专注于人工智能、AIGC、python、计算机视觉相关分享研究。 ✌更多学习资源&#xff0c;可关注公-仲-hao:【阿旭算法与机器学习】&#xff0c;共同学习交流~ &#x1f44d;感谢小伙伴们点赞、关注&#xff01; 《------往期经典推…

【Linux】System V信号量详解以及semget()、semctl()和semop()函数讲解

&#x1f490; &#x1f338; &#x1f337; &#x1f340; &#x1f339; &#x1f33b; &#x1f33a; &#x1f341; &#x1f343; &#x1f342; &#x1f33f; &#x1f344;&#x1f35d; &#x1f35b; &#x1f364; &#x1f4c3;个人主页 &#xff1a;阿然成长日记 …

Kotlin构造函数

目录 构造函数类型 主构造函数 成员变量设置 私有化操作 次级构造函数 构造函数类型 主构造函数&#xff08;主构造器&#xff09;——只能有一个次构造函数&#xff08;次构造器&#xff09;——可以是多个 主构造函数 构造器 constructor关键字前 无注解或修饰符作用&…

性能监控的革命:Eureka引领分布式服务监控新纪元

性能监控的革命&#xff1a;Eureka引领分布式服务监控新纪元 引言 在微服务架构中&#xff0c;服务的分布式性能监控对于维护系统健康和优化用户体验至关重要。Eureka作为Netflix开源的服务发现框架&#xff0c;为服务的注册与发现提供了强大支持&#xff0c;而结合其他工具&…

数字化转型:企业法务管理的未来发展 ​​​

在数字化浪潮的推动下&#xff0c;企业法务管理正经历着前所未有的变革。传统的法务工作模式在数据处理、合同审查、风险评估等方面逐渐显得力不从心。面对这一挑战&#xff0c;企业法务管理的数字化转型成为提升效率、保障合规、优化法律服务的必然选择。 数字化转型涉及到法…

HTML(30)——动画

动画 实现步骤 定义动画 keyframes 动画名称{ from{} to{} } keyframes 动画名称{ 0%{} 10%{} .... 100%{} } 2.使用动画 animation:动画名称 动画花费时间; 示例&#xff1a;盒子的宽度从200变到400px&#xff0c;两个状态一般用from to的形式 <style>.box {width: …

解析Xml文件并修改QDomDocument的值

背景&#xff1a; 我需要解决一个bug&#xff0c;需要我从xml中读取数据到QDomDocument&#xff0c;然后获取到我想要的目标信息&#xff0c;然后修改该信息。 ---------------------------------------------------------------------------------------------------------…

各大常用代码编辑器的快捷键集合

visualstudio2017 快捷键 多行注释 crtl / 取消多行注释crtl Q 代码跳转返回 crtl /- visualcode快捷键 代码跳转返回 crtl 左键/右键 androidstudio快捷键 代码跳转返回 crtl alt 左键/右键

VUE中ECharts提示框tooltip自动切换

目录 前言1导入插件2定义参数3 插件API 前言 使用VUE开发的数据大屏统计&#xff0c;又需要将 echarts的提示框 tooltip 实现自动切换&#xff0c;网上有个很简单的插件&#xff08;echarts-tooltip-auto-show&#xff09;&#xff0c;使用教程简单分享给大家。 自动每隔几秒切…

哦华为仓颉语言

本来我不太想说的&#xff0c;奈何有不少粉丝提问提到了这语言&#xff0c;目前的情况我不透露太多&#xff0c;看过这课程C实现一门计算机编程语言到手撸虚拟机实战的懂的自然懂。 在互联网领域几乎大部分应用软件运行在X86 LINUX上居多&#xff0c;如果你有问题可以先学习这…

多版本python环境中,让python3固定指向其中一个python可执行文件

如果你只安装一个python环境&#xff0c;那么一般可执行文件名就叫python.exe和pythonw.exe 但是如果你有多个python环境时&#xff0c;可执行文件名是需要进行修改的&#xff0c;使得在安装库和调用时能够分辨python环境&#xff0c;比如我的电脑中装有python3.10和python2.x …

Transformer模型论文解读、源码分析和项目实践

本文是ChatGPT系列的开篇之作&#xff0c;为什么吧Transformer放到这里呢&#xff0c;因为不管是chatgpt-1&#xff0c; chatgpt-2&#xff0c; chatgpt-3都是以Transformer作为底层基础来实现&#xff0c;相当于chatgpt系列的老祖先了。如果想要深入的了解清楚chatgpt的来龙去…

AcWing 4173. 线段 (贪心)

数轴上有 n 条线段&#xff0c;选取其中 k 条线段使得这 k&#x1d458; 条线段两两没有重合部分&#xff0c;问 k 最大为多少。 输入格式 第一行为一个正整数 n&#xff1b; 在接下来的 n 行中&#xff0c;每行有 2 个数 ai,bi&#xff0c;描述每条线段的左右端点坐标。 输…

BUUCTF[堆][of_by_one]

堆中of_by_one 介绍&#xff1a; 严格来说 off-by-one 漏洞是一种特殊的溢出漏洞&#xff0c;off-by-one 指程序向缓冲区中写入时&#xff0c;写入的字节数超过了这个缓冲区本身所申请的字节数并且只越界了一个字节。溢出字节为可控制任意字节 &#xff1a;通过修改大小(size…

token无感刷新方法

1.这里推荐去看这个老师的视频,我的方案都是根据他的视频来的视频地址 2.这边使用的工具是axios import axios from axios const service axios.create({baseURL: ,headers: {Authorization: token 你自己的token,},timeout: 1000 * 60, })// 拦截响应 service.interceptors…

Spring AOP源码篇四之 数据库事务

了解了Spring AOP执行过程&#xff0c;再看Spring事务源码其实非常简单。 首先从简单使用开始, 演示Spring事务使用过程 Xml配置&#xff1a; <?xml version"1.0" encoding"UTF-8"?> <beans xmlns"http://www.springframework.org/schema…

【北京迅为】《i.MX8MM嵌入式Linux开发指南》-第一篇 嵌入式Linux入门篇-第十六章 Linux 第一个程序 HelloWorld

i.MX8MM处理器采用了先进的14LPCFinFET工艺&#xff0c;提供更快的速度和更高的电源效率;四核Cortex-A53&#xff0c;单核Cortex-M4&#xff0c;多达五个内核 &#xff0c;主频高达1.8GHz&#xff0c;2G DDR4内存、8G EMMC存储。千兆工业级以太网、MIPI-DSI、USB HOST、WIFI/BT…