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 相关文章推荐
js 自制滚动条的小例子
Mar 16 Javascript
JQuery分别取得每行最后一列和最后一行的示例代码
Aug 18 Javascript
js点击button按钮跳转到另一个新页面
Oct 10 Javascript
node.js中的Socket.IO使用实例
Nov 04 Javascript
jquery实现标签支持图文排列带上下箭头按钮的选项卡
Mar 14 Javascript
JavaScript判断数组是否包含指定元素的方法
Jul 01 Javascript
JS实现支持多选的遍历下拉列表代码
Aug 20 Javascript
JQueryEasyUI之DataGrid数据显示
Nov 23 Javascript
微信小程序 http请求的session管理
Jun 07 Javascript
Vue下滚动到页面底部无限加载数据的示例代码
Apr 22 Javascript
React中如何引入Angular组件详解
Aug 09 Javascript
js+canvas实现纸牌游戏
Mar 16 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
PHP session会话的安全性分析
2011/09/08 PHP
第六章 php目录与文件操作
2011/12/30 PHP
php使用exec shell命令注入的方法讲解
2013/11/12 PHP
浅谈本地WAMP环境的搭建
2015/05/13 PHP
php7性能提升的原因详解
2019/10/13 PHP
JS的数组的扩展实例代码
2008/07/09 Javascript
JQuery 写的个性导航菜单
2009/12/24 Javascript
js弹出div并显示遮罩层
2014/02/12 Javascript
比例尺、缩略图、平移缩放之百度地图添加控件方法
2015/08/03 Javascript
批量下载对路网图片并生成html的实现方法
2016/06/07 Javascript
微信小程序 石头剪刀布实例代码
2017/01/04 Javascript
详解微信开发中snsapi_base和snsapi_userinfo及静默授权的实现
2017/03/11 Javascript
Django+Vue.js搭建前后端分离项目的示例
2017/08/07 Javascript
基于express中路由规则及获取请求参数的方法
2018/03/12 Javascript
原生javascript实现类似vue的数据绑定功能示例【观察者模式】
2020/02/24 Javascript
使用PYTHON接收多播数据的代码
2012/03/01 Python
python检查URL是否正常访问的小技巧
2017/02/25 Python
Python列表list内建函数用法实例分析【insert、remove、index、pop等】
2017/07/24 Python
详解Python实现多进程异步事件驱动引擎
2017/08/25 Python
zookeeper python接口实例详解
2018/01/18 Python
Django自定义manage命令实例代码
2018/02/11 Python
Python实现的寻找前5个默尼森数算法示例
2018/03/25 Python
Python对切片命名的实现方法
2018/10/16 Python
在python中利用numpy求解多项式以及多项式拟合的方法
2019/07/03 Python
Python3如何判断三角形的类型
2020/04/12 Python
纯css3实现走马灯效果
2014/12/26 HTML / CSS
英国可持续奢侈品包包品牌:Elvis & Kresse
2018/08/05 全球购物
西班牙多品牌鞋店连锁店:Krack
2018/11/30 全球购物
英国第一摩托车和摩托车越野配件商店:GhostBikes
2019/03/10 全球购物
Tahari ASL官方网站:高级设计师女装
2021/03/15 全球购物
销售员岗位职责
2014/06/09 职场文书
初级职称评定工作总结
2015/08/13 职场文书
2016年记者节感言
2015/12/08 职场文书
想要创业,那么你做好准备了吗?
2019/07/01 职场文书
js不常见操作运算符总结
2021/11/20 Javascript
Vue+Flask实现图片传输功能
2022/04/01 Vue.js