当前位置： 首页 > news >正文

HTML5和JS实现新年礼花效果

news 文章来源：https://blog.csdn.net/cnds123/article/details/135320489 2025/1/12 0:44:48

HTML5和JS实现新年礼花效果

2023兔年再见，2024龙年来临了！

祝愿读者朋友们在2024年里，身体健康，心灵愉悦，梦想成真。

下面是用HTML5和JS实现新年礼花效果：

源码如下：

<!DOCTYPE html>
<html>
<head><title>新年礼花</title><style>/* 设置画布占满整个窗口 */body {margin: 0;padding: 0;overflow: hidden;}canvas {display: block;}</style>
</head>
<body><!-- 创建一个画布 --><canvas id="fireworksCanvas"></canvas><script>// 获取canvas和contextconst canvas = document.getElementById('fireworksCanvas');const ctx = canvas.getContext('2d');// 设置canvas宽高为窗口的宽高canvas.width = window.innerWidth;canvas.height = window.innerHeight;// 初始化烟花数组let fireworks = [];// 定义产生min到max之间的随机数的函数function random(min, max) {return Math.random() * (max - min) + min;}// 定义烟花类class Firework {constructor(x, y, color) {this.x = x;this.y = y;this.particles = [];this.exploded = false;this.life = 0;this.color = color;this.explodeHeight = random(canvas.height * 0.3, canvas.height * 0.6);}// 更新烟花状态的方法update() {// 如果烟花还未爆炸，向上移动，并增加寿命if (!this.exploded) {this.y -= random(5, 10);this.life += 1;// 如果烟花达到或超过爆炸高度，爆炸if (this.y <= this.explodeHeight) {this.explode();}} else {// 如果烟花已经爆炸，更新和绘制粒子this.particles.forEach((particle, index) => {particle.update();if (particle.life < 0) {this.particles.splice(index, 1);}});}}// 绘制烟花的方法draw() {if (!this.exploded) {ctx.fillStyle = this.color;ctx.beginPath();ctx.arc(this.x, this.y, 2, 0, Math.PI * 2);ctx.fill();} else {this.particles.forEach((particle) => particle.draw());}}// 烟花爆炸的方法explode() {this.exploded = true;for (let i = 0; i < 100; i++) {const angle = random(0, Math.PI * 2);const speed = random(1, 4);this.particles.push(new Particle(this.x, this.y, angle, speed, this.color));}}}// 定义粒子类class Particle {constructor(x, y, angle, speed, color) {this.x = x;this.y = y;this.angle = angle;this.speed = speed;this.life = random(50, 100);this.color = color;}// 更新粒子状态的方法update() {this.x += Math.cos(this.angle) * this.speed;this.y += Math.sin(this.angle) * this.speed;this.speed *= 0.99;this.life -= 1;}// 绘制粒子的方法draw() {ctx.fillStyle = this.color + ', ' + (this.life / 100) + ')';ctx.beginPath();ctx.arc(this.x, this.y, 2, 0, Math.PI * 2);ctx.fill();}}// 动画函数function animate() {// 绘制背景ctx.fillStyle = 'rgba(0, 0, 0, 0.2)';ctx.fillRect(0, 0, canvas.width, canvas.height);// 以5%的概率添加新烟花if (Math.random() < 0.05) {const x = random(0, canvas.width);const y = canvas.height;const fireworkColor = 'hsla(' + random(0, 360) + ', 100%, 50%';fireworks.push(new Firework(x, y, fireworkColor));}// 更新和绘制烟花for (let i = fireworks.length - 1; i >= 0; i--) {fireworks[i].update();fireworks[i].draw();if (fireworks[i].exploded && fireworks[i].particles.length === 0) {fireworks.splice(i, 1);}}// 显示文字ctx.font = "50px Arial";ctx.fillStyle = "pink";ctx.textAlign = "center";ctx.fillText("2024年龙年快乐", canvas.width / 2, canvas.height / 2);// 继续下一帧动画requestAnimationFrame(animate);}// 启动动画animate();// 监听窗口大小变化，重新设置画布大小window.addEventListener('resize', function() {canvas.width = window.innerWidth;canvas.height = window.innerHeight;});</script>
</body>
</html>

OK！

相关文章：

HTML5和JS实现新年礼花效果

HTML5和JS实现新年礼花效果 2023兔年再见&#xff0c;2024龙年来临了&#xff01; 祝愿读者朋友们在2024年里&#xff0c;身体健康&#xff0c;心灵愉悦&#xff0c;梦想成真。 下面是用HTML5和JS实现新年礼花效果&#xff1a; 源码如下&#xff1a; <!DOCTYPE html>…...

编程日记 2024/1/1 1:06:42

【owt-server】一些构建项目梳理

【owt-server】清理日志&#xff1a;owt、srs、ffmpeg 【owt】p2p client mfc 工程梳理【m98】webrtc vs2017构建带符号的debug库【OWT】梳理构建的webrtc和owt mfc工程 m79的mfc客户端及owt-client...

编程日记 2024/1/1 1:04:40

Linux shell编程学习笔记38：history命令

目录 0 前言 1 history命令的功能、格式和退出状态1.1 history命令的功能1.2 history命令的格式1.3退出状态2 命令应用实例2.1 history&#xff1a;显示命令历史列表2.2 history -a&#xff1a;将当前会话的命令行历史追加到历史文件~/.bash_history中2.3 history -c&#xf…...

编程日记 2024/1/1 1:03:39

elasticsearch安装教程（超详细）

1.1 创建网络&#xff08;单点部署&#xff09; 因为我们还需要部署 kibana 容器&#xff0c;因此需要让 es 和 kibana 容器互联&#xff0c;所有先创建一个网络&#xff1a; docker network create es-net 1.2.加载镜像 采用的版本为 7.12.1 的 elasticsearch&#xff1b;…...

编程日记 2024/1/1 1:00:36

arkts中@Watch监听的使用

概述 Watch用于监听状态变量的变化&#xff0c;当状态变量变化时&#xff0c;Watch的回调方法将被调用。Watch在ArkUI框架内部判断数值有无更新使用的是严格相等&#xff08;&#xff09;&#xff0c;遵循严格相等规范。当在严格相等为false的情况下&#xff0c;就会触发Watch的…...

编程日记 2024/1/1 0:59:36

【Jmeter】Jmeter基础9-BeanShell介绍

3、BeanShell BeanShell是一种完全符合Java语法规范的脚本语言,并且又拥有自己的一些语法和方法。 3.1、Jmeter中使用的BeanShell 在Jmeter中&#xff0c;除了配置元件&#xff0c;其他类型的元件中都有BeanShell。BeanShell 是一种完全符合Java语法规范的脚本语言,并且又拥…...

编程日记 2024/1/1 0:58:34

详解数组的轮转

&#x1d649;&#x1d65e;&#x1d658;&#x1d65a;!!&#x1f44f;&#x1f3fb;‧✧̣̥̇‧✦&#x1f44f;&#x1f3fb;‧✧̣̥̇‧✦ &#x1f44f;&#x1f3fb;‧✧̣̥̇:Solitary-walk ⸝⋆ ━━━┓ - 个性标签 - &#xff1a;来于“云”的“羽球人”。…...

编程日记 2024/1/1 0:57:34

html 表格 笔记

<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>第二个页面</title><meta name"language" content"cn"> </head> <body><h2 sytle"width:500px;…...

编程日记 2024/1/1 0:56:33

计算机网络【HTTP 面试题】

HTTP的请求报文结构和响应报文结构 HTTP请求报文主要由请求行、请求头、空行、请求正文&#xff08;Get请求没有请求正文&#xff09;4部分组成。 1、请求行 由三部分组成&#xff0c;分别为&#xff1a;请求方法、URL以及协议版本&#xff0c;之间由空格分隔&#xff1b;请…...

编程日记 2024/1/1 0:54:29

linux基于用户身份对资源访问进行控制的解析及过程

linux中用户分为三类 1.超级用户&#xff08;root&#xff09; 拥有至高无上的权限 2.普通用户 人为创建、权限小&#xff0c;权限受到控制 3.程序用户 运行程序的用户&#xff0c;不是给人使用的&#xff0c;给程序使用的&#xff0c;一般不给登录&#xff01; 组账…...

编程日记 2024/1/1 0:53:28

手动创建idea SpringBoot 项目

步骤一&#xff1a; 步骤二&#xff1a; 选择Spring initializer -> Project SDK 选择自己的JDK版本 ->Next 步骤三&#xff1a; Maven POM ->Next 步骤四&#xff1a; 根据JDK版本选择Spring Boot版本 11版本及以上JDK建议选用3.2版本&#xff0c;JDK为11版本…...

编程日记 2024/1/1 0:51:25

【Go语言入门：Go语言的数据结构】

文章目录 3.Go语言的数据结构&#xff1a;3.1. 指针3.2. struct&#xff08;结构体&#xff09;3.3. Map(映射,哈希&#xff09; 3.Go语言的数据结构&#xff1a; 简介&#xff1a; 在Go语言中&#xff0c;数据结构体可以分为四种类型&#xff1a;基础类型、聚合类型、引用类型…...

编程日记 2024/1/1 0:50:24

QT designer的ui文件转py文件之后，实现pycharm中运行以方便修改逻辑，即添加实时模板框架

为PyCharm中的实时模板&#xff0c;你需要遵循以下步骤&#xff1a; 打开PyCharm的设置: 选择 File > Settings&#xff08;在macOS上是 PyCharm > Preferences&#xff09;。 导航到实时模板: 在设置中找到 Editor > Live Templates。 添加新的模板组 (可选): 为了…...

编程日记 2024/1/1 0:49:23

什么是负载均衡？

负载均衡是指在计算机网络领域中&#xff0c;将客户端请求分配到多台服务器上以实现带宽资源共享、优化资源利用率和提高系统性能的技术。负载均衡可以帮助小云有效解决单个服务器容量不足或性能瓶颈的问题&#xff0c;小云通过平衡流量负载&#xff0c;使得多台服务器能够共同…...

编程日记 2024/1/1 0:47:20

Python和Java的优缺点

Python的优点&#xff1a; 简单易学&#xff1a;Python的语法简洁清晰&#xff0c;易于学习和理解。丰富的库和框架&#xff1a;Python拥有庞大的标准库和活跃的开源社区&#xff0c;可以快速使用各种功能强大的库和框架&#xff0c;比如NumPy、Pandas、Django等。可读性强&am…...

编程日记 2024/1/1 0:46:19

AES - 在tiny-AES-c基础上封装了2个应用函数(加密/解密)

文章目录 AES - 在tiny-AES-c基础上封装了2个应用函数(加密/解密)概述增加2个封装函数的AES库aes.haes.c在官方测试程序上改的测试程序(用来测试这2个封装函数)END AES - 在tiny-AES-c基础上封装了2个应用函数(加密/解密) 概述 在github山有个星数很高的AES的C库 tiny-AES-c …...

编程日记 2024/1/1 0:43:17

51和32单片机读取FSR薄膜压力传感器压力变化

文章目录 简介线性电压转换模块51单片机读取DO接线方式51代码实验效果 32单片机读取AO接线方式32代码实验效果 总结 简介 FSR薄膜压力传感器是可以将压力变化转换为电阻变化的一种传感器&#xff0c;单片机可以读取然后作为粗略测量压力&#xff08;仅提供压力变化&#xff0c;…...

编程日记 2024/1/1 0:42:15

【maven】pom.xml 文件详解

有关 maven 其他配置讲解参考 maven 配置文件 setting.xml 详解 pom.xml 文件是 Maven 项目的核心配置文件&#xff0c;其中包含了项目的元数据、构建配置、依赖管理等信息。以下是一个 pom.xml 文件的主要部分&#xff1a; <?xml version"1.0" encoding"U…...

编程日记 2024/1/1 0:39:13

SpringMVC源码解析——DispatcherServlet初始化

在Spring中&#xff0c;ContextLoaderListener只是辅助功能&#xff0c;用于创建WebApplicationContext类型的实例&#xff0c;而真正的逻辑实现其实是在DispatcherServlet中进行的&#xff0c;DispatcherServlet是实现Servlet接口的实现类。Servlet是一个JAVA编写的程序&#…...

编程日记 2024/1/1 0:35:09

搞定Apache Superset

踩雷了无数次终于解决了Superset的一系列问题 现在是北京时间2023年12月27日&#xff0c;亲测有效。 Superset概述 Apache Superset是一个现代的数据探索和可视化平台。它功能强大且十分易用&#xff0c;可对接各种数据源&#xff0c;包括很多现代的大数据分析引擎&#xff…...

编程日记 2024/1/1 0:32:07

【每日试题】java面试之ssm框架

以下是20道常见的SSM&#xff08;SpringSpring MVCMyBatis&#xff09;面试题目和答案&#xff1a; 什么是SSM框架&#xff1f; SSM是指SpringSpring MVCMyBatis的组合&#xff0c;它是Java Web开发中常用的轻量级框架集合。 介绍一下SSM框架各个组件的作用&#xff1f; Sprin…...

编程日记 2024/1/1 0:31:06

Flutter 疑难杂症集合

一. Flutter集成uni小程序sdk 1. 手机连接电脑测试打开uni小程序没问题&#xff0c;打包成apk后debug编译下的apk也没问题&#xff0c;但就是release编译的apk包打不开小程序。 报错情景&#xff1a;点击后页面会闪现一下黑色的背景&#xff0c;然后又跳转回了点击之前的页面。…...

编程日记 2024/1/1 0:28:04

PHP序列化总结1--序列化和反序列化的基础知识

序列化和反序列化的作用 1.序列化&#xff1a;将对象转化成数组或者字符串的形式 2.反序列化&#xff1a;将数组或字符串的形式转化为对象 为什么要进行序列化 这种数据形式中间会有很多空格&#xff0c;不同人有不同的书写情况&#xff0c;可能还会出现换行的情况 为此为了…...

编程日记 2024/1/1 0:24:01

【Linux】 last 命令使用

last 命令 用于检索和展示系统中用户的登录信息。它从/var/log/wtmp文件中读取记录&#xff0c;并将登录信息按时间顺序列出。 著者 Miquel van Smoorenburg 语法 last [-R] [-num] [ -n num ] [-adiox] [ -f file ] [name...] [tty...]last 命令 -Linux手册页 选项及作用…...

编程日记 2024/1/1 0:23:00

Git 分布式版本控制系统(序章1)

第一章 Git 分布式版本控制系统 为什么学Git? 某些企业面试需要掌握Git&#xff0c;同时&#xff0c;也方便管理自己的Qt项目。 一、Git 客户端下载&#xff08;Windows&#xff09; 下载地址 https://gitee.com/all-about-git#git-%E5%A4%A7%E5%85%A8 二、Git 的特点 分支…...

编程日记 2024/1/1 0:15:55

给WordPress网站添加返回顶部按钮

给WordPress网站底部添加一个按钮&#xff0c;点它就可以现实快速返回到顶部。有两种方法可以现实&#xff0c;一种是通过安装相关插件来实现。另外一种方式就是以纯属代码的方式来实现。 给WordPress网站底部添加一个按钮&#xff0c;点它就可以现实快速返回到顶部。有两种方…...

编程日记 2024/1/1 0:12:52

App Inventor 2 接入短信服务，实现短信验证码功能

发送短信验证码功能一般都是基于短信平台提供的sdk进行调用&#xff0c;这里是基于阿里云短信平台进行的开发&#xff0c;阿里云短信平台接入步骤请点此参考。 App Inventor 2拓展提供的函数如下&#xff1a; 主要提供2个函数&#xff0c;生成随机位数的数字随机码 和 发送短信…...

编程日记 2024/1/1 0:10:50

Linux环境grep搜索方法记录

1 grep grep 命令&#xff0c;用来搜索字符串所在位置&#xff0c;可以具体到不同文件&#xff0c;不同行&#xff1b; 在Linux 下&#xff0c;查看命令释义如下 zhaocubuntu2004:~$ grep --help Usage: grep [OPTION]... PATTERNS [FILE]... Search for PATTERNS in each FI…...

编程日记 2024/1/1 0:06:46

C语言-破解密码

题目描述 密码是我们生活中非常重要的东东&#xff0c;我们的那么一点不能说的秘密就全靠它了。哇哈哈. 接下来渊子要在密码之上再加一套密码&#xff0c;虽然简单但也安全。 假设老王原来一个BBS上的密码为zvbo941987,为了方便记忆&#xff0c;他通过一种算法把这个密码变换…...

编程日记 2024/1/1 0:03:44

ffmpeg 解码文件时的时间戳问题

实时流和普通文件 1 实时流 实时流编码时&#xff0c;我们一般不进行b帧编码&#xff0c;但是文件存储时为了减小大小&#xff0c;会增加b帧&#xff0c;实时流只带了I&#xff0c;P帧&#xff0c;那就会好很多 2 普通文件 很多文件带了b帧&#xff0c;所以要使用解码时间去同…...

编程日记 2024/1/1 0:01:41

电脑网站生成手机网站/优化营商环境的措施建议

什么是编程语言上面提及的能够被计算机所识别的表达方式即编程语言&#xff0c;语言是沟通的介质&#xff0c;而编程语言是程序员与计算机沟通的介质。在编程的世界里&#xff0c;计算机更像是人的奴隶&#xff0c;人类编程的目的就命令奴隶去工作。编程语言分类机器语言汇编语…...

编程日记 2025/1/12 0:13:31

wordpress5.1/外贸推广建站

C进阶-继承零、前言一、继承的概念和定义二、基类和派生类对象赋值转换三、继承中的作用域四、派生类的默认成员函数五、继承和友元六、继承和静态成员七、菱形继承和虚拟继承八、继承和组合九、继承相关面试题零、前言 从本章开始&#xff0c;我们已经达到了C的入门水平&#…...

编程日记 2025/1/11 21:16:56

zblog wordpress dede/seo自动排名软件

BCGControlBar ("Business Components Gallery ControlBar")是MFC扩展库&#xff0c;使您可以创建具有完全自定义选项&#xff08;功能区、可自定义工具栏、菜单等&#xff09;以及一组专业设计的丰富Microsoft Office和Microsoft Visual Studio的应用程序 GUI控件&a…...

编程日记 2025/1/11 21:01:27

麻城做网站/免费刷粉网站推广免费

微信公众号“中学数学教与学”教师群公告微信QQ教师群入群方式及介绍高中数学教与学★教师QQ群【324623715】初中数学教与学★教师QQ群【460287009】中学数学教与学★学生QQ群【837494287】本文作者&#xff0c;David Matthews&#xff0c;《自然》特约作者。翻译作者&#xff…...

编程日记 2025/1/11 17:16:45

杭州市做外贸网站的公司/微信营销模式有哪些

本文整理自2017云栖大会-成都峰会上阿里云高级技术专家许玲的分享讲义。讲义主要分享了阿里云在智能客服方面给出的解决方案&#xff0c;并分享了其智能服务机器人“云博士”及其工作思路&#xff0c;并分享了关于阿里云旗下的智能对话分析服务的内容。...

编程日记 2025/1/11 17:00:56

汽贸做网站有用处吗/大数据查询个人信息

SAP中有关差异的一些概念 2006年11月18日 23:11:00 JackWu 阅读数 6066 1.SAP关于成本的概念 2.差异的计算方法. 3.实际成本计算方法 4.SAP variance 1.成本的概念 标准成本标准价格 * 标准数量 作业价格 * 标准数量 计划成本计划价格 * 计划数量 作业价格 * 计划数量 …...

编程日记 2025/1/11 15:59:04