HTML5和JS实现新年礼花效果

2024-03-08 10:59
文章标签 html5 实现 js 效果 frontend 新年 礼花

本文主要是介绍HTML5和JS实现新年礼花效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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>

修改1：加入新年贺词文字，让文字居中从下往往滚动，效果如下：

源码如下：

<!DOCTYPE html>
<html>
<head>
<title>新年礼花</title>
<style>
/* 设置画布占满整个窗口 */
body {
margin: 0;
padding: 0;
overflow: hidden;
}
canvas {
display: block;
}
.scrolling-text {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
font-size: 24px;
text-align: center;
color: red;
animation: scrollText 10s linear infinite;
}@keyframes scrollText {0% {top: 100%;}100% {top: -100%;}}
</style>
</head>
<body>
<!-- 创建一个画布 -->
<canvas id="fireworksCanvas"></canvas>
<div class="scrolling-text">
<p>《元日》</p>
<p>宋·王安石</p>
<p>爆竹声中一岁除，</p>
<p>春风送暖入屠苏。</p>
<p>千门万户曈曈日，</p>
<p>总把新桃换旧符。</p>
</div><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>

修改2：加入背景音乐，确保将音乐文件（我这里命名为"background_music.mp3"）与HTML文件放在同一目录中。音乐控制按钮应该能够显示在左上角了。效果如下：

源码如下：

<!DOCTYPE html>
<html>
<head><title>新年礼花</title><style>/* 设置画布占满整个窗口 */body {margin: 0;padding: 0;overflow: hidden;}canvas {display: block;}.scrolling-text {position: absolute;top: 100%;left: 50%;transform: translateX(-50%);font-size: 24px;text-align: center;color: red;animation: scrollText 10s linear infinite;}@keyframes scrollText {0% {top: 100%;}100% {top: -100%;}}.button-container {position: absolute;top: 10px;left: 10px;}.button-container button {padding: 10px 20px;font-size: 16px;}</style>
</head>
<body><!-- 创建一个画布 --><canvas id="fireworksCanvas"></canvas><div class="scrolling-text"><p>《元日》</p><p>宋·王安石</p><p>爆竹声中一岁除，</p><p>春风送暖入屠苏。</p><p>千门万户曈曈日，</p><p>总把新桃换旧符。</p></div><div class="button-container"><button id="playButton">播放音乐</button></div><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;});// 播放音乐的按钮点击事件const playButton = document.getElementById('playButton');const bgm = new Audio('background_music.mp3');playButton.addEventListener('click', function() {if (bgm.paused) {bgm.play();playButton.textContent = '暂停音乐';} else {bgm.pause();playButton.textContent = '播放音乐';}});</script>
</body>
</html>

OK！

这篇关于HTML5和JS实现新年礼花效果的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/786865。

相关文章

windos server2022里的DFS配置的实现

windos server2022里的DFS配置的实现

《windosserver2022里的DFS配置的实现》DFS是WindowsServer操作系统提供的一种功能,用于在多台服务器上集中管理共享文件夹和文件的分布式存储解决方案,本文就来介绍一下wi... 目录什么是DFS？优势：应用场景：DFS配置步骤什么是DFS？DFS指的是分布式文件系统（Distr
阅读更多...
NFS实现多服务器文件的共享的方法步骤

NFS实现多服务器文件的共享的方法步骤

《NFS实现多服务器文件的共享的方法步骤》NFS允许网络中的计算机之间共享资源,客户端可以透明地读写远端NFS服务器上的文件,本文就来介绍一下NFS实现多服务器文件的共享的方法步骤,感兴趣的可以了解一... 目录一、简介二、部署1、准备1、服务端和客户端：安装nfs-utils2、服务端：创建共享目录3、服
阅读更多...
C#使用yield关键字实现提升迭代性能与效率

C#使用yield关键字实现提升迭代性能与效率

《C#使用yield关键字实现提升迭代性能与效率》yield关键字在C#中简化了数据迭代的方式,实现了按需生成数据,自动维护迭代状态,本文主要来聊聊如何使用yield关键字实现提升迭代性能与效率,感兴... 目录前言传统迭代和yield迭代方式对比yield延迟加载按需获取数据yield break显式示迭
阅读更多...
Python实现高效地读写大型文件

Python实现高效地读写大型文件

《Python实现高效地读写大型文件》Python如何读写的是大型文件,有没有什么方法来提高效率呢,这篇文章就来和大家聊聊如何在Python中高效地读写大型文件,需要的可以了解下... 目录一、逐行读取大型文件二、分块读取大型文件三、使用 mmap 模块进行内存映射文件操作（适用于大文件）四、使用 pand
阅读更多...
python实现pdf转word和excel的示例代码

python实现pdf转word和excel的示例代码

《python实现pdf转word和excel的示例代码》本文主要介绍了python实现pdf转word和excel的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价... 目录一、引言二、python编程1，PDF转Word2，PDF转Excel三、前端页面效果展示总结一
阅读更多...
Python xmltodict实现简化XML数据处理

Python xmltodict实现简化XML数据处理

《Pythonxmltodict实现简化XML数据处理》Python社区为提供了xmltodict库,它专为简化XML与Python数据结构的转换而设计,本文主要来为大家介绍一下如何使用xmltod... 目录一、引言二、XMLtodict介绍设计理念适用场景三、功能参数与属性1、parse函数2、unpa
阅读更多...
C#实现获得某个枚举的所有名称

C#实现获得某个枚举的所有名称

《C#实现获得某个枚举的所有名称》这篇文章主要为大家详细介绍了C#如何实现获得某个枚举的所有名称,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以参考一下... C#中获得某个枚举的所有名称using System;using System.Collections.Generic;usi
阅读更多...
Go语言实现将中文转化为拼音功能

Go语言实现将中文转化为拼音功能

《Go语言实现将中文转化为拼音功能》这篇文章主要为大家详细介绍了Go语言中如何实现将中文转化为拼音功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 有这么一个需求：新用户入职 创建一系列账号比较麻烦，打算通过接口传入姓名进行初始化。想把姓名转化成拼音。因为有些账号即需要中文也需要英
阅读更多...
C# 读写ini文件操作实现

C# 读写ini文件操作实现

《C#读写ini文件操作实现》本文主要介绍了C#读写ini文件操作实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 目录一、INI文件结构二、读取INI文件中的数据在C#应用程序中，常将INI文件作为配置文件，用于存储应用程序的
阅读更多...
C#实现获取电脑中的端口号和硬件信息

C#实现获取电脑中的端口号和硬件信息

《C#实现获取电脑中的端口号和硬件信息》这篇文章主要为大家详细介绍了C#实现获取电脑中的端口号和硬件信息的相关方法,文中的示例代码讲解详细,有需要的小伙伴可以参考一下... 我们经常在使用一个串口软件的时候，发现软件中的端口号并不是普通的COM1，而是带有硬件信息的。那么如果我们使用C#编写软件时候，如
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2