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 相关文章推荐
JavaScript 中的replace方法说明
Apr 13 Javascript
JavaScript学习笔记之基础语法
Jan 22 Javascript
JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例
Mar 04 Javascript
浅谈JavaScript中的分支结构
Jul 01 Javascript
微信小程序的动画效果详解
Jan 18 Javascript
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
Jan 22 Javascript
jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】
Mar 15 Javascript
微信运维交互机器人的示例代码
Nov 12 Javascript
windows下create-react-app 升级至3.3.1版本踩坑记
Feb 17 Javascript
node创建Vue项目步骤详解
Mar 06 Javascript
解决vue下载后台传过来的乱码流的问题
Dec 05 Vue.js
JS新手入门数组处理的实用方法汇总
Apr 07 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
DC动画很好看?新作烂得令人发指,名叫《红色之子》
2020/04/09 欧美动漫
ajax+php打造进度条代码[readyState各状态说明]
2010/04/12 PHP
PHP错误Warning:mysql_query()解决方法
2015/10/24 PHP
学习php设计模式 php实现策略模式(strategy)
2015/12/07 PHP
juqery 学习之三 选择器 层级 基本
2010/11/25 Javascript
JavaScript Title、alt提示(Tips)实现源码解读
2010/12/12 Javascript
JavaScript操纵窗口的方法小结
2013/06/28 Javascript
变量声明时命名与变量作为对象属性时命名的区别解析
2013/12/06 Javascript
javascript实现Table排序的方法
2015/05/15 Javascript
Vue.js每天必学之内部响应式原理探究
2016/09/07 Javascript
jQuery实现简单的网页换肤效果示例
2016/09/18 Javascript
Vue常用指令V-model用法
2017/03/08 Javascript
微信小程序 sha1 实现密码加密实例详解
2017/07/06 Javascript
vue 多入口文件搭建 vue多页面搭建的实例讲解
2018/03/12 Javascript
详解Nuxt.js 实战集锦
2019/11/19 Javascript
echarts实现折线图的拖拽效果
2019/12/19 Javascript
python实现zencart产品数据导入到magento(python导入数据)
2014/04/03 Python
python 按不同维度求和,最值,均值的实例
2018/06/28 Python
Python Web编程之WSGI协议简介
2018/07/18 Python
django echarts饼图数据动态加载的实例
2019/08/12 Python
Python自动化完成tb喵币任务的操作方法
2019/10/30 Python
解决Tensorboard 不显示计算图graph的问题
2020/02/15 Python
Python利用for循环打印星号三角形的案例
2020/04/12 Python
使用phonegap克隆和删除联系人的实现方法
2017/03/31 HTML / CSS
Raleigh兰令自行车美国官网:英国凤头牌自行车
2018/01/08 全球购物
英国领先的高街书籍专家:Waterstones
2018/02/01 全球购物
美国校服网上商店:French Toast
2019/10/08 全球购物
测绘工程个人的自我评价
2013/11/23 职场文书
知识竞赛活动方案
2014/02/18 职场文书
精彩的广告词
2014/03/19 职场文书
幼儿园小班教师寄语
2014/04/03 职场文书
企业党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
创业计划书之珠宝饰品
2019/08/26 职场文书
导游词之铁岭象牙山
2019/12/06 职场文书
浅谈Nginx 中的两种限流方式
2021/03/31 Servers
Apache Hudi的多版本清理服务彻底讲解
2022/03/31 Servers