❤️创意网页:HTML5 Canvas技术实现绚丽多彩的烟花特效

news2024/12/23 18:24:13

博主:命运之光 

🌸专栏:Python星辰秘典

🐳专栏:web开发(简单好用又好看)

❤️专栏:Java经典程序设计

☀️博主的其他文章:点击进入博主的主页

前言:欢迎踏入我的Web项目专栏,一段神奇而令人陶醉的数字世界!

🌌在这里,我将带您穿越时空,揭开属于Web的奥秘。通过HTML、CSS和JavaScript的魔力,我创造了一系列令人惊叹的Web项目,它们仿佛是从梦境中涌现而出。

🌌在这个专栏中,您将遇到华丽的界面,如流星划过夜空般迷人;您将感受到动态的交互,如魔法般让您沉浸其中;您将探索响应式设计的玄妙,让您的屏幕变幻出不同的绚丽景象。

🌌无论您是一个探险家还是一位嗜血的代码巫师,这个专栏将成为您的魔法书。我将分享每个项目的秘密,解开编码的谜题,让您也能够拥有制作奇迹的力量。

🌌准备好了吗?拿起您的键盘,跟随我的指引,一起进入这个神秘而充满惊喜的数字王国。在这里,您将找到灵感的源泉,为自己创造出一段奇幻的Web之旅!

目录

引言

动态图展示

静态图展示

图1

图2 

准备工作

代码解析

HTML结构

JavaScript代码

项目完整代码

代码的使用方法(超简单什么都不用下载)

🍓1.打开记事本 

🍓2.将上面的源代码复制粘贴到记事本里面将文件另存为HTML文件点击保存即可

🍓3.打开html文件(大功告成(●'◡'●))

结语


引言

烟花特效一直以来都是网页设计中的热门元素之一,它能够为用户带来视觉上的愉悦和惊喜。在这篇技术博客中,我们将使用HTML5 Canvas和JavaScript来实现一个绚丽多彩的烟花特效。我们将逐步解释代码的不同部分,介绍如何利用Canvas API和动画效果来创造这个引人注目的效果。


动态图展示

 


静态图展示

图1

图2 


准备工作

在开始之前,我们需要了解一些基本知识。Canvas是HTML5新增的一个2D绘图API,它允许我们通过JavaScript来绘制图形、动画和特效。在本次实现中,我们将使用Canvas来生成烟花爆炸的效果,并通过动画来让烟花绽放在屏幕上。


代码解析

我们将按照代码的结构来逐步解析烟花特效的实现。

HTML结构

首先,我们在HTML文件中添加了一个<canvas>元素,用于在其中绘制烟花。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fireworks Effect</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
      background-color: black;
    }
    canvas {
      display: block;
    }
  </style>
</head>
<body>
  <canvas id="fireworksCanvas"></canvas>
  <!-- JavaScript代码将在这里插入 -->
</body>
</html>

JavaScript代码

接下来,让我们来看一下JavaScript部分的代码。

首先,我们创建一个Particle类,用于表示烟花爆炸后的每个粒子效果。每个粒子的位置、颜色、速度和透明度都是随机生成的,以达到多样化的效果。

接着,我们创建了Firework类,用于表示完整的烟花效果。每个烟花爆炸时,会产生多个粒子效果。

animate函数中,我们通过调用requestAnimationFrame来实现动画效果,每帧都会更新画布和粒子的状态,并进行绘制。

最后,在setInterval函数中,我们定时触发烟花的生成,以便让烟花不断地绽放在画布上。

const canvas = document.getElementById('fireworksCanvas');
const ctx = canvas.getContext('2d');
let fireworks = [];

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

window.addEventListener('resize', () => {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
});

class Particle {
  constructor(x, y, color, velocityX, velocityY) {
    this.x = x;
    this.y = y;
    this.color = color;
    this.velocityX = velocityX;
    this.velocityY = velocityY;
    this.radius = 2.5;
    this.opacity = 1;
  }

  update() {
    this.x += this.velocityX;
    this.y += this.velocityY;
    this.velocityY += 0.1;
    this.opacity -= 0.01;
  }

  draw(ctx) {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
    ctx.fillStyle = this.color;
    ctx.globalAlpha = this.opacity;
    ctx.shadowBlur = 10;
    ctx.shadowColor = this.color;
    ctx.fill();
  }
}

class Firework {
  constructor(x, y) {
    this.x = x;
    this.y = canvas.height; // 从画布底部发射
    this.particles = [];
    this.velocityY = -10; // 初始向上速度
    for (let i = 0; i < 50; i++) {
      const color = `hsl(${Math.random() * 360}, 100%, 50%)`;
      const velocityX = (Math.random() - 0.5) * 6;
      this.particles.push(new Particle(x, y, color, velocityX, this.velocityY));
    }
  }

  update() {
    this.particles.forEach(particle => particle.update());
  }

  draw(ctx) {
    this.particles.forEach(particle => particle.draw(ctx));
  }
}

function animate() {
  ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  fireworks.forEach((firework, index) => {
    if (firework.particles[0].opacity <= 0) {
      fireworks.splice(index, 1);
    } else {
      firework.update();
      firework.draw(ctx);
    }
  });

  requestAnimationFrame(animate);
}

// 定时触发烟花效果
setInterval(() => {
  for (let i = 0; i < 25; i++) {
    const x = Math.random() * canvas.width;
    const y = Math.random() * (canvas.height / 2) + canvas.height / 2;
    fireworks.push(new Firework(x, y));
  }
}, 2000); // 每2秒触发一次烟花效果

// 启动动画
animate();

项目完整代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fireworks Effect</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
      background-color: black;
    }
    canvas {
      display: block;
    }
  </style>
</head>
<body>
  <canvas id="fireworksCanvas"></canvas>

  <script>
    const canvas = document.getElementById('fireworksCanvas');
    const ctx = canvas.getContext('2d');
    let fireworks = [];

    // 设置画布大小
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    // 监听窗口大小变化
    window.addEventListener('resize', () => {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
    });

    class Particle {
      constructor(x, y, color, velocityX, velocityY) {
        this.x = x;
        this.y = y;
        this.color = color;
        this.velocityX = velocityX;
        this.velocityY = velocityY;
        this.radius = 2.5;
        this.opacity = 1;
      }

      update() {
        this.x += this.velocityX;
        this.y += this.velocityY;
        this.velocityY += 0.1;
        this.opacity -= 0.01;
      }

      draw(ctx) {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
        ctx.fillStyle = this.color;
        ctx.globalAlpha = this.opacity;
        ctx.shadowBlur = 10;
        ctx.shadowColor = this.color;
        ctx.fill();
      }
    }

    class Firework {
      constructor(x, y) {
        this.x = x;
        this.y = canvas.height; // Set the starting position at the bottom of the canvas
        this.particles = [];
        this.velocityY = -10; // Initial upward velocity
        for (let i = 0; i < 50; i++) {
          const color = `hsl(${Math.random() * 360}, 100%, 50%)`;
          const velocityX = (Math.random() - 0.5) * 6;
          this.particles.push(new Particle(x, y, color, velocityX, this.velocityY));
        }
      }

      update() {
        this.particles.forEach(particle => particle.update());
      }

      draw(ctx) {
        this.particles.forEach(particle => particle.draw(ctx));
      }
    }

    function animate() {
      ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
      ctx.fillRect(0, 0, canvas.width, canvas.height);

      fireworks.forEach((firework, index) => {
        if (firework.particles[0].opacity <= 0) {
          fireworks.splice(index, 1);
        } else {
          firework.update();
          firework.draw(ctx);
        }
      });

      requestAnimationFrame(animate);
    }

    // 自动触发烟花效果
    setInterval(() => {
      for (let i = 0; i < 25; i++) {
        const x = Math.random() * canvas.width;
        const y = Math.random() * (canvas.height / 2) + canvas.height / 2;
        fireworks.push(new Firework(x, y));
      }
    }, 2000); // Fireworks will be triggered every 2 seconds

    // 启动动画
    animate();
  </script>
</body>
</html>

代码的使用方法(超简单什么都不用下载)

🍓1.打开记事本 

🍓2.将上面的源代码复制粘贴到记事本里面将文件另存为HTML文件点击保存即可

🍓3.打开html文件(大功告成(●'◡'●))


结语

通过使用HTML5 Canvas和JavaScript,我们成功地实现了一个绚丽多彩的烟花特效。这个特效通过粒子的动态绘制,让烟花在画布上绽放。通过定时触发烟花效果,我们让整个页面充满了生动和活力。


本章的内容就到这里了,觉得对你有帮助的话就支持一下博主把~

🌌点击下方个人名片,交流会更方便哦~
↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

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

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

相关文章

node中的数据持久化之mysql

一、数据库的基本概念 1. 什么是数据库 数据库&#xff08;Database&#xff09;是按照数据结构来组织、存储和管理数据的仓库。每个数据库都有一个或多个不同的API用于创建、访问、管理、搜索和复制所保存的数据。我们也可以将数据存储在其他地方&#xff0c;例如&#xff1…

XML加密和数字签名

上篇文章我们了解了常用的Java加密库和算法,这篇文章主要讲解Java解密在XML中的使用。 XML加密 XML加密(XML Encryption)是指对XML文档中的敏感数据进行加密,以确保只有授权的用户能够解密和访问这些数据。XML加密使用对称或非对称加密算法,对敏感数据进行加密,并将加…

237. 删除链表中的节点

题目描述&#xff1a; 主要思路&#xff1a; 将当前要删除的节点和后边一个的节点值交换&#xff0c;然后删除当前节点后边的一个节点即可。 class Solution { public:void deleteNode(ListNode* node) {node->valnode->next->val;node->nextnode->next->n…

分享一个唯美雪花界面

先看效果&#xff1a; 再看代码&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>雪</title><meta name"viewport" content"widthdevice-width, initial-scale1&…

linux开机启动输入法且设置英文状态

debian&#xff0c;gnome桌面。fcitx5框架&#xff0c;四叶草输入法。 首先把fcitx5加到开机启动项&#xff0c;方法很多&#xff0c;gnome的插件“优化”里面可以添加开机启动项。 这样开机就能启动输入法&#xff0c;而不用再手动输入shell命令fcitx5了。 但是启动时是中…

vue-element-admin解决跨域问题

更改vue.config.js publicPath: process.env.NODE_ENV production ? /tyzfadmin : /,//开发和生产环境不一样&#xff0c;做个判断 outputDir: dist, assetsDir: static, lintOnSave: false, runtimeCompiler: true, productionSourceMap: false, devServer: {port: port,op…

瑞芯微|如何让拥有双网口的Linux设备实现数据包转发?

本文主要讲解如何&#xff0c;解决基于3568实现双网口互通问题。 一、组网 如下图所示&#xff1a; rk3568自带2个千兆以太口&#xff0c;对应网卡名称为&#xff1a;eth0、eth1pc1和pc2分别连接这2个网口pc1与eth0连接&#xff0c;网段&#xff1a;192.168.30.0pc2与eth1连…

途乐证券-新型城镇概念拉升,东方园林涨停,蕾奥规划等大涨

新型乡镇概念19日盘中发力走高&#xff0c;到发稿&#xff0c;蕾奥规划涨近13%&#xff0c;东方园林涨停&#xff0c;顾地科技涨超8%&#xff0c;新城市、艾布鲁、启迪环境等涨超5%。 消息面上&#xff0c;在国新办18日举行的国务院方针例行吹风会上&#xff0c;住建部房地产市…

django rest_framework 框架动态设置序列化返回的字段

动态修改字段可以使Django rest框架API像graphQL端点一样&#xff0c;只从模型中检索所需的字段。 一旦序列化器被初始化&#xff0c;就可以使用.fields属性访问序列化器上设置的字段字典。访问和修改此属性允许您动态修改序列化器。 显式地修改fields参数可以帮助您做一些奇…

解码 LangChain|用 LangChain 和 Milvus 从零搭建 LLM 应用

如何从零搭建一个 LLM 应用&#xff1f;不妨试试 LangChain Milvus 的组合拳。 作为开发 LLM 应用的框架&#xff0c;LangChain 内部不仅包含诸多模块&#xff0c;而且支持外部集成&#xff1b;Milvus 同样可以支持诸多 LLM 集成&#xff0c;二者结合除了可以轻松搭建一个 LLM…

猿辅导推出颠覆性产品小猿学练机,加速个性化学习时代到来

近期&#xff0c;沉默近两年的猿辅导在智能硬件领域释放动作&#xff0c;发布旗下首款智能硬件产品——小猿学练机。这一动作代表着&#xff0c;猿辅导正式入局1000亿智能硬件市场。据了解&#xff0c;小猿学练机面向全国中小学生&#xff0c;主打学练一体、以练促学&#xff0…

外部邻区TAC配置错误导致语音被叫无响应问题分析

1、问题描述 用户131********用户&#xff08;中兴AXON 40终端&#xff09;容易出现被叫无响应的现象&#xff0c;现场测试发生概率大约10%。 2、信令分析 6月4日现场测试时&#xff0c;11.47分左右&#xff0c;131********测试时出现一起未接通问题。 端到端平台信令回溯分析…

ubuntu - Linux 下的常用命令

ls 查看当前文件夹下的内容 pwd 查看当前所在文件夹 cd 切换文件夹 touch 如果文件不存在&#xff0c;创建文件 mkdir 创建新目录 rm 删除指定的文件 clear 清屏 ctrl shift 放大终端窗口的字体显示 ctrl - 缩小终端窗口的字体显示 按 上&#xff0f;下 光标键可以在…

【硕士论文完美复现】【价格型需求响应】基于需求侧响应的配电网供电能力综合评估(Matlab代码实现)

目录 &#x1f4a5;1 概述 1.1 电价伸缩系数分析 1.2 需求侧响应数学模型 1.3 粒子群算法求解 1.4 本文流程图 &#x1f4da;2 运行结果 2.1 风电和光伏的出力情况 2.2 峰谷时段分类 2.3 分时电价制定及负荷响应结果 2.3.1 仅考虑需求响应 2.3.2 考虑分布式和需…

图论 并查集 模拟 位运算—题841、127、684、685、657、31、463、1356 C++实现与有向图 无向图 并查集总结

文章目录 841.钥匙和房间DFSBFS 127. 单词接龙684.冗余连接685.冗余连接II657. 机器人能否返回原点31.下一个排列463. 岛屿的周长解法1解法2 1356. 根据数字二进制下 1 的数目排序解法1解法2 注意点 图论&#xff1a;题841、127 并查集&#xff1a;题684、685 模拟&#xff1a;…

记一次从溯源分析到云服务器接管

起因是我这个臭运维的在给客户做常态化的溯源分析&#xff0c;好巧不巧发现了一个IP扔到奇安信威胁情报平台看一下&#xff0c;发现部署了大量的服务&#xff0c;且为阿里云服务器。 看到这里&#xff0c;我大胆的推测&#xff0c;云上的信息中心&#xff0c;客户花点钱&#x…

《教育界》期刊简介及投稿邮箱

《教育界》期刊简介及投稿邮箱 一、《教育界》期刊简介 《教育界》是面向各级教育行政主管部门、教育科研院所、各类大中专院校、中小学校及其从事教育教学工作的教育工作者和专业教师的综合性教育教学类素质教育专业性教育学术理论期刊。 主管单位&#xff1a;广西师范大学…

create database创建数据库失败

瀚高数据库 目录 环境 症状 问题原因 解决方案 环境 系统平台&#xff1a;Linux x86-64 Red Hat Enterprise Linux 7 版本&#xff1a;4.5.7 症状 1、执行如下sql语句创建数据库报错。 create database printcdburn with encodingUTF8 OWNERprintcdburn LC_COLLATEzh_CN.UTF-…

蓝桥杯真题:密码脱落(区间dp)

目录 题目&#xff1a; 解题思路&#xff1a; dp分析&#xff1a; 解题代码&#xff1a; 题目&#xff1a; 解题思路&#xff1a; 题目要求的为脱落的种子数&#xff08;即回文字符中没有对应回文的字符的数量&#xff09; 我们可以转换成求回文字符串最长回文字符串的长…

Unity基础 固定关节 FixedJoint

Unity是一款强大的游戏开发引擎&#xff0c;它提供了各种丰富的功能和组件&#xff0c;使开发者能够轻松创建复杂的游戏世界。其中&#xff0c;固定关节&#xff08;FixedJoint&#xff09;是Unity中一个非常重要的组件&#xff0c;它用于实现物体之间的固定连接。 组件主要面板…