JavaScript实现点击烟花

已于 2022-03-17 22:34:36 修改
阅读量1.1k 收藏 7
点赞数 2
文章标签： javascript css html
于 2021-09-14 13:41:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51245887/article/details/120285414
版权

演示地址

先看一下效果图

在这里插入图片描述
(由于我不知道怎么吧gif放入Markdown里面先暂时用图片来展示。。。)
一直看到别人博客里面点击时的烟花效果感觉很酷炫，今天去学习了一下做了个自己的，感觉很开心哈哈哈，用来当做笔记吧。

源码：
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>点击产生类似烟花效果</title>
</head>
<body>
</body>
<script>
   //粒子颜色,根据爱好来选择
   const Colors = [
       "red",
       "blue",
       "green",
       "gary",
       "orange",
       "pink",
       "yellow",
       "purple",
       "black",
   ] ;
   //定义粒子数量
   const particlesNumber = 20;

   function creatParticle(x,y){
       const ele = document.createElement("div");
       //设置成一个小园形，自己也可以根据爱好设置成其他如心型、星型
       ele.style.height = "10px";
       ele.style.width = "10px";
       ele.style.borderRadius = "5px";

       //设置绝对位置
       ele.style.position = "absolute";
       ele.style.top = `${y}px`;
       ele.style.left = `${x}px`;
       //光标位于方块中央
       ele.style.transform = "transform(-50%,-50%)";
       ele.style.backgroundColor = Colors[Math.floor(Math.random()*Colors.length)];
       
       /*animate(keysframes,options)函数,options可以是动画持续时间，也可以是多个属性值的对象
        duration：持续时间，iterations：动画迭代次数(Infinity表示无限动画)，delay：添加到动画的延迟  
       */
       const animation = ele.animate(
           [
               {
                   transform:`translate(${(Math.random()-0.5)*500}px,${(Math.random()-0.5)*500}px) rotate(${Math.random()*520}deg)`,
                   opacity: 0
               },
           ],
           { duration: 1000, iterations: 1 }
       );
       //向网页添加元素
       document.body.appendChild(ele);
       //结束后将DOM产生的div去除
       animation.onfinish = () => ele.remove();
   }
      //创建点击事件
   document.addEventListener("click",(e) =>{
      //获取当前光标位置
      const {clientX: x, clientY: y } = e;

      //创建多个粒子
      for (let index = 0; index < particlesNumber; index++) {
          creatParticle(x,y);
      }

   });

</script>
</html>

点击👉这里查看特效演示

挚夏
关注
  • 2
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
鼠标点击实现烟花
m0_73737249的博客
11-17 727
鼠标点击出烟花效果
2022跨年烟花代码（五）HTML5全屏烟花特效
热门推荐
m0_55613022的博客
02-24 5万+
HTML5全屏烟花特效 html代码 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &lt
BabylonJS之放烟花
路漫漫其修远兮，吾将上下而求索。
02-23 467
用BabylonJS实现的放烟花功能
2024年前端最新烟花代码,予心上人最璀璨烟花—— 附源码与成品（HTML+CSS+JS(3)，2024新一波程序员跳槽季
最新发布
2301_82243839的博客
05-07 952
由于篇幅限制小编，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！由于篇幅限制小编，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！由于篇幅限制小编，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！14.说一下 Vue 和 React 的认识，做一个简单的对比。
程序员：带你制作浪漫烟花告白
LLand520的博客
01-03 5652
程序员：带你制作浪漫烟花告白 Python智禅 2020-01-03 14:33 效果图 属性设计 烟花状态：烟花应有三个状态： 升空 等待炸裂 炸裂后 烟花：发射点（x, y），爆炸点(xEnd, yEnd)，升空后等待炸裂时间（wait），炸裂后微粒个数（count），烟花半径（radius） **烟花炸裂后微粒：**自身位置（x, y），自身大小（size），自身速度（rate），最大烟花...
html烟花特效案例,HTML5前端特效库 css3 按钮粒子烟花特效源码
weixin_42520573的博客
06-03 882
HTML5前端特效库 css3 按钮粒子烟花特效源码效果图各位长友大家上午好！今天给大家带来的是 css3 按钮粒子烟花特效源码！大家可以按照自己的意愿进行修改！有想要文件版源码的可以 在我以往的文章里找到我的联系好了，废话不多说，上源码！body {margin: 0;overflow: hidden;#myCanvas {display: block;#button {font-family:...
JavaScript语言实现春节烟花代码，点击网页即可酷炫放烟花
02-11
JavaScript语言实现春节烟花代码，点击网页即可酷炫放烟花
es6语法实现点击生成烟花效果
07-07
用es6语法 实现的一个简单的点击屏幕出现随机颜色的烟花的效果，用h5写的。
点击鼠标夜空放烟花 java javascript
01-13
需要安装java虚拟机，本人已经尽量优化了代码使烟花的效果运行的流畅和绚丽。泡mm最好的方法....... 背景是copy的(就是一个小女生和一只死猫)。 背景音乐是约定。 再就是关于布局啊、燃放区域啊之类的自己到不局里面...
【JavaScript源代码】JavaScript实现烟花特效(面向对象).docx
12-29
JavaScript实现烟花特效(面向对象) 　本文实例为大家分享了JavaScript实现烟花特效的具体代码，供大家参考，具体内容如下　本特效使用面向对象编程　OOA　 点击触发事件 烟花运动分成两个阶段 　向上飞  爆炸 ...
使用html+css+javascript实现一个漂亮、炫酷的表白页面，给出源码
06-03
使用html+css+javascript实现一个漂亮、炫酷的表白页面，给出源码，该页面使用 CSS 的 radial-gradient 函数实现了爱心背景，并且使用了 filter 属性和 text-shadow 属性来增加页面的视觉效果。同时，使用了 CSS 的 ...
HTML5鼠标点击烟花播放效果.zip
05-27
HTML5鼠标点击烟花播放效果基于canvas、jquery-2.0.0.min.js制作，实现烟花动画播放特效，多种颜色烟花燃放效果。
JS实现放烟花效果
10-15
主要为大家详细介绍了JS实现放烟花效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
过年过节通过html+css+js代码实现：超级好看的放烟花效果(含背景音乐)
刘鑫磊
12-31 2888
超级好看的放烟花效果（带你一起来看烟花）
❤️创意网页：HTML5 Canvas技术实现绚丽多彩的烟花特效教程
VLOKL的博客
07-19 3903
❤️创意网页：HTML5 Canvas技术实现绚丽多彩的烟花特效教程
【HTML+CSS+JavaScript】实现鼠标点击烟花效果
浅陌繁星的博客
12-27 8261
本文主要分享使用【HTML+CSS+JavaScript】实现鼠标点击烟花效果（爆炸型、心型、圆形）。文章末尾附有完整的代码和图片获取链接。
用JavaScript实现烟花效果
qq_50721840的博客
04-23 4107
要实现烟花效果之前，我们先得将body的背景设为黑色，这样烟花的效果才能更加明显，下面附上两种烟花效果的代码： 1、自由散落效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name...
html5 canvas 点击放烟花
qq_39237554的博客
04-19 2574
在网上仿照大神写的, 用谷歌浏览最好 代码里调用 run() 可实现带线的烟花, 点击canvas生成一朵烟花 右击canvas清空一次画布 双击canvans生成一朵带线的随机烟花 代码里我将clear()方法隐藏掉了, 所以不会每一帧都清空画布 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E...
鼠标点击小烟花特效
lw2309485575的博客
03-10 2987
鼠标点击小烟花特效 介绍 鼠标点击出现小烟花特效 在线演示 https://murenziwei.github.io/lw_firewords/index.html 源码Git地址 Gitee: https://gitee.com/murenziwei/lw_firewords.git Github: https://github.com/murenziwei/lw_firewords.git 主...
写段javascript代码，实现烟花效果
09-17
### 回答1： 以下是一个简单的 JavaScript 代码，用于实现烟花效果： ```javascript // 获取画布元素 const canvas = document.getElementById("canvas"); // 获取画布上下文 const ctx = canvas.getContext("2d"); // 设置画布尺寸 canvas.width = window.innerWidth; canvas.height = window.innerHeight; // 创建一个数组来存储烟花对象 const fireworks = []; // 创建一个循环，每秒更新60次 setInterval(function() { // 清空画布 ctx.clearRect(0, 0, canvas.width, canvas.height); // 遍历烟花数组 for (let i = 0; i < fireworks.length; i++) { // 更新烟花 fireworks[i].update(); // 绘制烟花 fireworks[i].draw(); // 如果烟花已经消失，则从数组中移除它 if (fireworks[i].done) { fireworks.splice(i, 1); } } }, 1000 / 60); // 创建一个烟花构造函数 function Firework() { // 烟花起点坐标 this.x = Math.random() * canvas.width; this.y = canvas.height; // 烟花终点坐标 this.targetX = Math.random() * canvas.width; this.targetY = Math.random() * canvas.height; // 烟花颜色 this.color = `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`; // 烟花半径 this.radius = 4; // 烟花速度 this.speed = 8; // 烟花加速度 this.acceleration = 1.05; // 烟花已经消失的标志 this.done = false; // 更新烟花位置 this.update = function() { // 计算距离目标点的距离 const distanceX = this.targetX - this.x; const distanceY = this.targetY - this.y; const distance = Math.sqrt(distanceX * distanceX + distanceY * distanceY); // 如果烟花已经到达目标点，则设置烟花已经消失的标志为 true if (distance < 10) { this.done = true; } // 计算烟花的速度和加速度 const speedX = distanceX / distance * this.speed; const speedY = distanceY / distance * this.speed; this.speed *= this.acceleration; // 更新烟花的位置 this.x += speedX; this.y += speedY; }; // 绘制烟花 this.draw = function() { ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2); ctx.fillStyle = this.color; ctx.fill(); }; } // 在每次点击鼠标时创建一个新的烟花对象 canvas.addEventListener("click", function(event) { fireworks.push(new Firework()); }); ``` 这段代码会在页面上 ### 回答2： 烟花效果是一种动态的效果，可以通过使用JavaScript来实现。以下是一个简单的实现例子： ```javascript // 获取画布元素 const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); // 设置画布大小 canvas.width = window.innerWidth; canvas.height = window.innerHeight; // 烟花数组 const fireworks = []; // 烟花类 class Firework { constructor() { this.x = Math.random() * canvas.width; this.y = canvas.height; this.targetX = Math.random() * canvas.width; this.targetY = Math.random() * canvas.height / 2; this.speed = 2; this.color = `hsl(${Math.random() * 360}, 100%, 50%)`; } // 更新烟花位置 update() { this.x += (this.targetX - this.x) / 20; this.y += (this.targetY - this.y) / 20; // 绘制烟花 ctx.beginPath(); ctx.fillStyle = this.color; ctx.arc(this.x, this.y, 3, 0, Math.PI * 2); ctx.fill(); } } // 创建新的烟花 function createFirework() { fireworks.push(new Firework()); } // 动画循环 function loop() { // 清空画布 ctx.fillStyle = 'rgba(0, 0, 0, 0.1)'; ctx.fillRect(0, 0, canvas.width, canvas.height); // 更新并绘制烟花 for (let i = fireworks.length - 1; i >= 0; i--) { fireworks[i].update(); // 移除离开画布的烟花 if (fireworks[i].y <= fireworks[i].targetY) { fireworks.splice(i, 1); } } // 创建新的烟花 if (Math.random() < 0.05) { createFirework(); } // 循环调用 requestAnimationFrame(loop); } // 启动动画 loop(); ``` 你可以将上述代码放入一个HTML文件中，并在页面中添加一个具有'id="canvas"'的canvas元素即可看到烟花效果。注意，这只是一个简单的实现例子，你可以根据需求对代码进行修改和扩展。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值