js实现点击烟花特效


Posted in Javascript onOctober 14, 2020

代码:

<script type="text/javascript">
function clickEffect() {
  let balls = [];
  let longPressed = false;
  let longPress;
  let multiplier = 0;
  let width, height;
  let origin;
  let normal;
  let ctx;
  const colours = ["#F73859", "#14FFEC", "#00E0FF", "#FF99FE", "#FAF15D"];
  const canvas = document.createElement("canvas");
  document.body.appendChild(canvas);
  canvas.setAttribute("style", "width: 100%; height: 100%; top: 0; left: 0; z-index: 99999; position: fixed; pointer-events: none;");
  const pointer = document.createElement("span");
  pointer.classList.add("pointer");
  document.body.appendChild(pointer);

  if (canvas.getContext && window.addEventListener) {
    ctx = canvas.getContext("2d");
    updateSize();
    window.addEventListener('resize', updateSize, false);
    loop();
    window.addEventListener("mousedown", function(e) {
      pushBalls(randBetween(10, 20), e.clientX, e.clientY);
      document.body.classList.add("is-pressed");
      longPress = setTimeout(function() {
        document.body.classList.add("is-longpress");
        longPressed = true;
      }, 500);
    }, false);
    window.addEventListener("mouseup", function(e) {
      clearInterval(longPress);
      if (longPressed == true) {
        document.body.classList.remove("is-longpress");
        pushBalls(randBetween(50 + Math.ceil(multiplier), 100 + Math.ceil(multiplier)), e.clientX, e.clientY);
        longPressed = false;
      }
      document.body.classList.remove("is-pressed");
    }, false);
    window.addEventListener("mousemove", function(e) {
      let x = e.clientX;
      let y = e.clientY;
      pointer.style.top = y + "px";
      pointer.style.left = x + "px";
    }, false);
  } else {
    console.log("canvas or addEventListener is unsupported!");
  }


  function updateSize() {
    canvas.width = window.innerWidth * 2;
    canvas.height = window.innerHeight * 2;
    canvas.style.width = window.innerWidth + 'px';
    canvas.style.height = window.innerHeight + 'px';
    ctx.scale(2, 2);
    width = (canvas.width = window.innerWidth);
    height = (canvas.height = window.innerHeight);
    origin = {
      x: width / 2,
      y: height / 2
    };
    normal = {
      x: width / 2,
      y: height / 2
    };
  }
  class Ball {
    constructor(x = origin.x, y = origin.y) {
      this.x = x;
      this.y = y;
      this.angle = Math.PI * 2 * Math.random();
      if (longPressed == true) {
        this.multiplier = randBetween(14 + multiplier, 15 + multiplier);
      } else {
        this.multiplier = randBetween(6, 12);
      }
      this.vx = (this.multiplier + Math.random() * 0.5) * Math.cos(this.angle);
      this.vy = (this.multiplier + Math.random() * 0.5) * Math.sin(this.angle);
      this.r = randBetween(8, 12) + 3 * Math.random();
      this.color = colours[Math.floor(Math.random() * colours.length)];
    }
    update() {
      this.x += this.vx - normal.x;
      this.y += this.vy - normal.y;
      normal.x = -2 / window.innerWidth * Math.sin(this.angle);
      normal.y = -2 / window.innerHeight * Math.cos(this.angle);
      this.r -= 0.3;
      this.vx *= 0.9;
      this.vy *= 0.9;
    }
  }

  function pushBalls(count = 1, x = origin.x, y = origin.y) {
    for (let i = 0; i < count; i++) {
      balls.push(new Ball(x, y));
    }
  }

  function randBetween(min, max) {
    return Math.floor(Math.random() * max) + min;
  }

  function loop() {
    ctx.fillStyle = "rgba(255, 255, 255, 0)";
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for (let i = 0; i < balls.length; i++) {
      let b = balls[i];
      if (b.r < 0) continue;
      ctx.fillStyle = b.color;
      ctx.beginPath();
      ctx.arc(b.x, b.y, b.r, 0, Math.PI * 2, false);
      ctx.fill();
      b.update();
    }
    if (longPressed == true) {
      multiplier += 0.2;
    } else if (!longPressed && multiplier >= 0) {
      multiplier -= 0.4;
    }
    removeBall();
    requestAnimationFrame(loop);
  }

  function removeBall() {
    for (let i = 0; i < balls.length; i++) {
      let b = balls[i];
      if (b.x + b.r < 0 || b.x - b.r > width || b.y + b.r < 0 || b.y - b.r > height || b.r < 0) {
        balls.splice(i, 1);
      }
    }
  }
}
clickEffect();//调用
</script>

效果:

js实现点击烟花特效

以上就是js实现点击烟花特效的详细内容,更多关于js 烟花特效的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
Apr 24 Javascript
Jquery的hover方法让鼠标经过li时背景变色
Sep 06 Javascript
js/jQuery简单实现选项卡功能
Jan 02 Javascript
jquery插件lazyload.js延迟加载图片的使用方法
Feb 19 Javascript
js使用for循环查询数组中是否存在某个值
Aug 12 Javascript
js 右侧浮动层效果实现代码(跟随滚动)
Nov 22 Javascript
理解javascript中的Function.prototype.bind的方法
Feb 03 Javascript
jQuery动态生成不规则表格(前后端)
Feb 21 Javascript
Node.JS利用PhantomJs抓取网页入门教程
May 19 Javascript
解决jQuery ajax动态新增节点无法触发点击事件的问题
May 24 jQuery
关于Angularjs中跨域设置白名单问题
Apr 17 Javascript
vue实现五子棋游戏
May 28 Javascript
vue使用Sass时报错问题的解决方法
Oct 14 #Javascript
JavaScript原生数组函数实例汇总
Oct 14 #Javascript
如何通过JS实现日历简单算法
Oct 14 #Javascript
浅谈js数组splice删除某个元素爬坑
Oct 14 #Javascript
如何使用JS console.log()技巧提高工作效率
Oct 14 #Javascript
JavaScript Blob对象原理及用法详解
Oct 14 #Javascript
基于javascript原生判断DOM是否加载完毕
Oct 14 #Javascript
You might like
Session保存到数据库的php类分享
2011/10/24 PHP
解析PHP实现多进程并行执行脚本
2013/06/18 PHP
使用PHP备份MYSQL数据的多种方法
2014/01/15 PHP
jQuery Ajax使用 全解析
2010/12/15 Javascript
js 连接数据库如何操作数据库中的数据
2012/11/23 Javascript
JavaScript实现网页截图功能
2014/10/16 Javascript
JavaScript 对象字面量讲解
2016/06/06 Javascript
Javascript实现代码折叠功能
2016/08/25 Javascript
Angular 常用指令实例总结整理
2016/12/13 Javascript
基于Vue如何封装分页组件
2016/12/16 Javascript
Vue响应式原理详解
2017/04/18 Javascript
JavaScript中的连续赋值问题实例分析
2019/07/12 Javascript
JS模拟浏览器实现全局搜索功能
2019/09/11 Javascript
jQuery实现消息弹出框效果
2019/12/10 jQuery
JS实现单张或多张图片持续无缝滚动的示例代码
2020/05/10 Javascript
解决微信授权成功后点击按返回键出现空白页和报错的问题
2020/06/08 Javascript
jquery实现鼠标悬浮弹出气泡提示框
2020/12/23 jQuery
Python如何实现MySQL实例初始化详解
2017/11/06 Python
Python3实现将本地JSON大数据文件写入MySQL数据库的方法
2018/06/13 Python
Python中利用aiohttp制作异步爬虫及简单应用
2018/11/29 Python
Python3 Post登录并且保存cookie登录其他页面的方法
2018/12/28 Python
Python3内置模块之base64编解码方法详解
2019/07/13 Python
CSS3 实现雷达扫描图的示例代码
2020/09/21 HTML / CSS
canvas实现俄罗斯方块的方法示例
2018/12/13 HTML / CSS
波兰最早的运动鞋精品店之一:Street Supply
2019/08/29 全球购物
环保建议书
2014/03/12 职场文书
企业形象策划方案
2014/05/29 职场文书
高考励志标语
2014/06/05 职场文书
党的群众路线教育实践活动对照检查材料(教师)
2014/09/24 职场文书
四风问题个人剖析材料
2014/10/07 职场文书
企业2014年度工作总结
2014/12/10 职场文书
2015年社区工作总结
2015/04/08 职场文书
学校百日安全活动总结
2015/05/07 职场文书
假如给我三天光明读书笔记
2015/06/26 职场文书
2016年教师党员创先争优承诺书
2016/03/24 职场文书
Netty分布式客户端接入流程初始化源码分析
2022/03/25 Java/Android