开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js烟花特效教程

以下是一个使用 JavaScript 和 Canvas 实现简单烟花特效的示例：

HTML 部分：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>烟花特效</title>
</head>

<body>
  <canvas id="fireworkCanvas"></canvas>
  <script src="firework.js"></script>
</body>

</html>

JavaScript 部分（firework.js）：

const canvas = document.getElementById('fireworkCanvas');
const ctx = canvas.getContext('2d');

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

// 烟花粒子类
class Particle {
  constructor(x, y, color) {
    this.x = x;
    this.y = y;
    this.color = color;
    this.size = Math.random() * 3 + 1;
    this.speedX = Math.random() * 6 - 3;
    this.speedY = Math.random() * -6 - 2;
    this.gravity = 0.05;
    this.alpha = 1;
    this.decay = Math.random() * 0.015 + 0.005;
  }

  update() {
    this.x += this.speedX;
    this.y += this.speedY;
    this.speedY += this.gravity;
    this.alpha -= this.decay;
  }

  draw(ctx) {
    ctx.save();
    ctx.globalAlpha = this.alpha;
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
    ctx.fillStyle = this.color;
    ctx.fill();
    ctx.restore();
  }
}

// 烟花类
class Firework {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.particles = [];
    this.color = `hsl(${Math.random() * 360}, 100%, 50%)`;
    this.createParticles();
  }

  createParticles() {
    const particleCount = 100;
    for (let i = 0; i < particleCount; i++) {
      this.particles.push(new Particle(this.x, this.y, this.color));
    }
  }

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

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

// 创建烟花数组
let fireworks = [];

// 动画循环
function animate() {
  requestAnimationFrame(animate);
  ctx.fillStyle = 'rgba(0, 0, 0, 0.2)';
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  fireworks.forEach((firework, index) => {
    firework.update();
    firework.draw(ctx);
    if (firework.particles.every(particle => particle.alpha <= 0)) {
      fireworks.splice(index, 1);
    }
  });

  // 随机创建烟花
  if (Math.random() < 0.05) {
    fireworks.push(new Firework(canvas.width / 2, canvas.height));
  }
}

animate();

基础概念：

Canvas：HTML5 中的一个元素，用于绘制图形和动画。
粒子系统：通过创建大量的微小粒子来模拟复杂的视觉效果，如烟花。

优势：

可以实现非常绚丽多彩的效果，增强用户体验。
能够根据不同的需求进行定制和扩展。

应用场景：

节日庆祝页面的装饰。
游戏中的特效表现。
活动宣传网站的视觉呈现。

可能出现的问题及解决方法：

性能问题：如果烟花数量过多或者粒子效果过于复杂，可能导致页面卡顿。可以减少烟花数量、简化粒子效果或者优化代码逻辑来提高性能。
兼容性问题：在不同浏览器中可能会有显示差异。需要进行充分的测试，并根据不同浏览器的特性进行适当的调整。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

生日主题的烟花特效HTML,CSS,JS

charset="UTF-8"> 生日烟花特效...; canvas.width = window.innerWidth; canvas.height = window.innerHeight; // 烟花类...colors = ['#ff3d3d', '#ff9c3d', '#ffe03d', '#3dff83', '#3db9ff', '#9c3dff', '#ff3de8']; // 添加烟花...烟花功能：每个烟花是由 Firework 类生成的粒子组成，模拟了绚丽的散开效果。生日主题：中心的文字动画通过 @keyframes glow 实现，配合文字生日快乐！

1741 0

网站添加点击烟花特效

方法一 1.首先点击下方下载文件并解压 2.wordpress用户将解压的js文件上传至你主题目录的js文件夹下 3.wordpress用户将下方代码复制你主题的footer.php文件里一定要在js/djtx.js）方法二如果嫌方法一麻烦的话可以直接将下方代码添加至footer.php文件里，强制刷新页面即可显示效果...--给 WordPress 网站添加鼠标点击爆炸五颜六色特效--> js

1.8K3 0

Unity Visual Effect Graph 制作Fireworks烟花特效

效果图：首先创建一个Visual Effect Graph，命名为Fireworks：在粒子初始化中，我们设置烟花的生成位置，让烟花沿着X轴在[-50, 50]取值范围内随机生成粒子...在生命周期中并不改变它的大小，因此我们使用Set Size为其设置固定的大小0.05，Color颜色值同样，使用Set Color设为固定的颜色，并适当增加Intensity使其发光：以上是烟花发射的部分

1.4K1 0

分享几种JS烟花

今天看到蓝色理想有几个哥们都发了自己写的烟花效果，弄的心里痒痒，自己也想写一个出来玩，结果把IE写死好几次，还是放弃了，这里转几个别人写的效果上来分享 <!

2.5K7 0

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

简介在这篇技术博客中，我们将介绍如何使用HTML5 Canvas和JavaScript创建一个绚丽的烟花特效。我们将解释代码的各个部分以及它们是如何协作产生生动的烟花效果的。...介绍烟花特效一直是网页设计中吸引人们眼球的一种方式。通过HTML5 Canvas，我们可以利用JavaScript代码生成并控制烟花的效果。...Particle类这个类表示一个烟花粒子。每个烟花爆炸会产生多个这样的粒子。这些粒子的位置、颜色、速度和透明度都是随机的，因此会呈现出绚丽多彩的效果。...当烟花触发时，它会产生多个烟花粒子，构成一个完整的爆炸效果。...将上面的源代码复制粘贴到记事本里面将文件另存为HTML文件点击保存即可 3.打开html文件（大功告成(●'◡'●)）结论通过使用HTML5 Canvas和JavaScript，我们成功地创建了一个绚丽多彩的烟花特效

6711 0

新春烟花特效 HTML：打造你的节日专属网页

摘要每逢新春佳节，烟花总能为节日增添一份热闹和喜庆。如何用HTML和JavaScript在网页上实现炫丽的烟花特效呢？本文将从零开始，带领小白用户创建一个简单却生动的烟花效果。...引言烟花特效是许多节日主题网页中的亮点，为用户带来愉悦的视觉体验。通过学习和实现这个效果，你不仅可以提升自己的前端开发技能，还能让你的网页更具吸引力。...本文将结合HTML5的元素与JavaScript，手把手教你如何实现一个动态烟花特效。新春烟花特效 HTML：打造你的节日专属网页正文 1....实现烟花特效下面是实现烟花特效的主要代码。...总结通过本教程，我们学会了如何利用HTML5的元素与JavaScript创建一个炫丽的新春烟花特效。

2341 0

快过年了，用五种不同的JS特效带你看烟花（包邮送元宇宙图书）

今天给大家带来几个好看的基于 HTML+CSS+JS 的烟花特效雪花、樱花、浪漫贺卡以及圣诞树我前段时间刚做过，感兴趣的也可以看看我前几期的博客：雪花：https://haiyong.blog.csdn.net.../article/details/122008942 圣诞树和贺卡：https://haiyong.blog.csdn.net/article/details/122024043 目录五种不同的JS...烟花特一、简单大气的烟花二、在农村看到的烟花三、可点击的烟花四、3D旋转烟花五、可拖动视角的自定义烟花评论区抽粉丝送书啦 ✨ 完整源码下载五种不同的JS烟花特效一、简单大气的烟花...css也只有这两段内容 body{ background:black; overflow:hidden; margin:0; } canvas{ background:#000; } JS...代码 JS代码比较长，我这里放了一部分，需要完整源码的可以关注公众号【海拥】回复【烟花】 var RENDERER = { LEAF_INTERVAL_RANGE : {min : 100, max

1.9K4 1

html+css+js实现的新年烟花

html+css+js实现的新年烟花程序效果展示：烟花简介：烟花又称花炮、烟火、焰火、炮仗，根据《中国烟花爆竹标准—安全与质量》对烟花爆竹的定义为：以烟火药为原料，用于产生声光色的娱乐用品。...烟花其实和爆竹的结构类似，其结构都包含黑火药和药引。...本烟花的制作主要使用的技术是，js里面的canvas，制作厉害的前端，需要的就是这个东西。 Canvas 中文名称叫“画布”，它是游戏中所有UI组件的“容器”。...doctype html> 烟花 html,body{ margin:

510 0

html5点击出现燃放烟花特效

2015-04-09 09:32:18 今天我发现了一个非常好的html特效，是由HTML5来实现的，效果非常绚丽。效果如下： ? 所以特来和大家分享一下。先说一下HTML代码吧：烟花燃放特效代码.../jquery-2.0.0.min.js"> js/Fireworks.js"> 点击页面任何地方燃放烟花！...另外，将上面那段js代码形成js文件浏览起来效果会好一些，本站提供这两个文件的下载，请点击下面的下载即可。

3.3K2 0

js 实现下雪特效

直接上代码放到你的script 标签中具体效果参考博客页面 (function($){ $.fn.snow = function(options){ v...

22.9K1 0

原生JS实现翻书特效

给大家分享一个用原生JS实现的翻书效果图，效果如下：实现代码如下，欢迎大家复制粘贴。原生JS实现翻书特效

20.4K0 1

闲谈（一）博客常用工具-JavaScript

1,雪花特效特效--> js">js/snow.js"> 2，打字烟花特效烟花特效--> js/activate-power-mode.js">特效--> js/love.js"> 4，标题转换

2785 0

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

引言烟花特效一直以来都是网页设计中的热门元素之一，它能够为用户带来视觉上的愉悦和惊喜。在这篇技术博客中，我们将使用HTML5 Canvas和JavaScript来实现一个绚丽多彩的烟花特效。...Canvas是HTML5新增的一个2D绘图API，它允许我们通过JavaScript来绘制图形、动画和特效。在本次实现中，我们将使用Canvas来生成烟花爆炸的效果，并通过动画来让烟花绽放在屏幕上。...代码解析我们将按照代码的结构来逐步解析烟花特效的实现。 HTML结构首先，我们在HTML文件中添加了一个元素，用于在其中绘制烟花。 <!...将上面的源代码复制粘贴到记事本里面将文件另存为HTML文件点击保存即可 3.打开html文件（大功告成(●'◡'●)）结语通过使用HTML5 Canvas和JavaScript，我们成功地实现了一个绚丽多彩的烟花特效...这个特效通过粒子的动态绘制，让烟花在画布上绽放。通过定时触发烟花效果，我们让整个页面充满了生动和活力。

6631 0

原生JS实现涟漪按钮特效

给大家分享一个用原生JS实现的涟漪按钮特效，效果如下：以下是代码实现，欢迎大家复制粘贴和收藏。原生JS...实现按钮涟漪特效 * { margin: 0; padding:

23.4K2 0

原生JS实现目录滚动特效

分享一个用原生JS实现的文字滚动效果，这种效果通常用在网页中一些局部展示信息，如新闻、动态、充值记录等，效果如下： ? 实现代码如下：原生JS...实现目录滚动特效 body { font-size: 12px; line-height: 24px

33.1K2 0

原生JS实现球面展示特效

分享一个由原生JS实现的球面展示效果，效果如下：实现代码如下：原生JS...实现球面展示特效 body { background-color: #000; } #div1...课程教程试听精品视频 SEO 特效 JavaScript

12.1K1 0

原生JS实现书本立体特效

给大家分享一个原生JS实现的书本立体特效，效果如下：实现这个特效需要的三张图片如下：第一张图：0.jpg 第二张图 1.jpg 第三张图：3.jpg 实现代码如下，欢迎大家复制粘贴。原生JS实现书本立体特效 <style type

14.8K1 0

关于js特效轮播图练习

【出现问题】 js轮播图，图片未正常轮播。【解决方法】通过对代码的检查，发现是以下三个原因造成的错误。　　...1.js代码问题 js代码使用alert(test);，测试修改完毕后，发现依然没有解决错误。

1061 0

原生JS实现数码表特效

分享一个用原生JS实现的数码时钟特效，效果如下：上面的数字是用的图片生成的，共10张图片如下：实现代码如下，欢迎大家复制粘贴。原生JS...实现数码表特效 body { background: blue; color: white;

17K1 0

原生JS实现VR看图特效

html> 原生JS...实现VR看图特效 body { margin: 0; } img {

14.2K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭