canvas 鼠标点击出现烟花效果

denson 发布于2019-08-20 17:05 / 3682人阅读

摘要：主要想法鼠标点击事件触发圆点出现在鼠标处圆点大小，颜色，数量随机有一个小白圈做为轨迹不断改变半径变大变淡消失圆点向外移动，自身变小，消失。

主要想法：

鼠标点击事件触发圆点出现在鼠标处

圆点大小，颜色，数量随机

有一个小白圈做为轨迹,不断改变半径变大变淡消失

圆点向外移动，自身变小，消失。随着移动的距离远，移动速度跟着变

需要处理的是，从鼠标点击处可以确定圆点的x,y轴，但是动去哪，怎么动是一个问题，
所以先确定圆点的目标坐标，再从圆点的原始坐标（即鼠标点击处）向目标坐标移动，并且x,y 成比例去移动才不会在x,y移动距离不相等的情况下不平衡

随机生成圆点目标坐标的函数代码：

</>复制代码 
let endpos = (x, y) => {
  let angle = random(0, 360) * Math.PI / 180,
    value = random(20, 150),
    radius = [-1, 1][random(0, 1)] * value;
  return {
    x: x + radius * Math.cos(angle),
    y: y + radius * Math.sin(angle)
  }
}

因为需要大量的随机数，所以封装一个生成随机数函数

</>复制代码 
let random = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;

圆点的移动函数，我们需要的移动是从原始坐标向目标坐标由快而慢。
生成比例分成3段。那就是原始坐标到第一段坐标为第一段，第一段坐标到第二段坐标为第二段，第二段坐标到目标坐标为第三段。如果当前坐标是处于第一段内，则速度越快，以此类推

现在两种情况，一种是目标坐标大于原始坐标，那么，第一段就为最接近原始坐标的那一段(Math.max(current, ff) == current ? (Math.max(current, mm) == current ? s : m) : f)，第二种情况是目标坐标小于原始坐标，那么就反过来，第一段为离原始坐标最远的那一段。

</>复制代码 
//根据不同距离段设置前行的步伐，分为3个阶段，离出发点近的那一段为速度最快，中间为速度一般，最远为速度最慢
//区分目标点小于出发点的情况
//ratio为两点之间的距离的行走比例，比例数值越大，行走越慢
  moveFun(start, end, current) {
    let s = random(26, 35),
      m = random(20, 25),
      f = random(15, 20),
      ff = start.x + ~~((end.x - start.x) / 3),
      mm = ff + ~~((end.x - start.x) / 3),
      ratio = end.x >= start.x ? (Math.max(current, ff) == current ? (Math.max(current, mm) == current ? s : m) : f) : (Math.max(current, ff) == current ? f : (Math.max(current, mm) == current ? m : s)),
      mp = {
        x: end.x - start.x,
        y: end.y - start.y
      };
    return {
      x: Math.abs(mp.x / ratio),
      y: Math.abs(mp.y / ratio)
    }
  }

每一个小圆点做为一个个体，自带移动函数，和移动的目标坐标。每次Animation时，圆点进行重绘更新最新的坐标

小圆点的代码：

</>复制代码 
class Circle {
  constructor(x, y) {
    this.r = random(9, 13)
    this.opos = {}
    this.x = this.opos.x = x
    this.y = this.opos.y = y
    this.colors = ["#FF1461", "#18FF92", "#5A87FF", "#FBF38C"]
    this.color = this.colors[random(0, this.colors.length)];
    this.tpos = endpos(x, y)
  }
  creatCircle(ctx) {
    ctx.beginPath()
    ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI)
    ctx.closePath()
    ctx.fillStyle = this.color
    ctx.fill()
  }
  //根据不同距离段设置前行的步伐，分为3个阶段，离出发点近的那一段为速度最快，中间为速度一般，最远为速度最慢
  //区分目标点小于出发点的情况
  //ratio为两点之间的距离的行走比例，比例数值越大，行走越慢
  moveFun(start, end, current) {
    let s = random(26, 35),
      m = random(20, 25),
      f = random(15, 20),
      ff = start.x + ~~((end.x - start.x) / 3),
      mm = ff + ~~((end.x - start.x) / 3),
      ratio = end.x >= start.x ? (Math.max(current, ff) == current ? (Math.max(current, mm) == current ? s : m) : f) : (Math.max(current, ff) == current ? f : (Math.max(current, mm) == current ? m : s)),
      mp = {
        x: end.x - start.x,
        y: end.y - start.y
      };
    return {
      x: Math.abs(mp.x / ratio),
      y: Math.abs(mp.y / ratio)
    }
  }
  //根据计算出来的移动值去移动
  //如果目标坐标大于原始坐标则向右移动，最大不能超过目标坐标，反之向左移动最小不能小于目标坐标
  move() {
    var movepos = this.moveFun(this.opos, this.tpos, this.x);
    this.x = (this.opos.x > this.tpos.x) ? Math.max(this.x - movepos.x, this.tpos.x) : Math.min(this.x + movepos.x, this.tpos.x)
    this.y = this.opos.y > this.tpos.y ? Math.max(this.y - movepos.y, this.tpos.y) : Math.min(this.y + movepos.y, this.tpos.y)
    this.r = Math.max(Math.abs((this.r - Math.random() / 1.2).toFixed(2)), 0)
  }
}

大圆则是从鼠标点击处创建的一个圆，并不断改变其半径向外扩展，并且越来越透明，当它已经很大并且很透明时意味着我们的动画要结束了，所以以这个为标准，停止动画，并且清空屏幕

大圆代码：

</>复制代码 
class BigCircle {
  constructor(x, y) {
    this.bR = random(16, 32)
    this.overR = random(60, 100)
    this.x = x
    this.y = y
    this.op = 1
  }
  creatBigCircle(ctx) {
    ctx.beginPath()
    ctx.arc(this.x, this.y, this.bR, 0, 2 * Math.PI)
    ctx.closePath()
    ctx.strokeStyle = "rgba(128, 128, 128, " + this.op + ")"
    ctx.stroke()
  }
  changeR() {
    this.bR = Math.min(this.bR += random(1, 4), this.overR);
    this.op = Math.max((this.op - Math.random() / 12).toFixed(2), 0)
  }
  //检查是否运行完毕，以大圆为标准清空屏幕
  complete() {
    return this.bR >= this.overR && this.op <= 0;
  }
}

全部代码：

</>复制代码 
//canvas鼠标点击烟花特效
let endpos = (x, y) => {
  let angle = random(0, 360) * Math.PI / 180,
    value = random(20, 150),
    radius = [-1, 1][random(0, 1)] * value;
  return {
    x: x + radius * Math.cos(angle),
    y: y + radius * Math.sin(angle)
  }
}
let random = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
class Circle {
  constructor(x, y) {
    this.r = random(9, 13)
    this.opos = {}
    this.x = this.opos.x = x
    this.y = this.opos.y = y
    this.colors = ["#FF1461", "#18FF92", "#5A87FF", "#FBF38C"]
    this.color = this.colors[random(0, this.colors.length)];
    this.tpos = endpos(x, y)
  }
  creatCircle(ctx) {
    ctx.beginPath()
    ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI)
    ctx.closePath()
    ctx.fillStyle = this.color
    ctx.fill()
  }
  //根据不同距离段设置前行的步伐，分为3个阶段，离出发点近的那一段为速度最快，中间为速度一般，最远为速度最慢
  //区分目标点小于出发点的情况
  //ratio为两点之间的距离的行走比例，比例数值越大，行走越慢
  moveFun(start, end, current) {
      let s = random(26, 35),
        m = random(20, 25),
        f = random(15, 20),
        ff = start.x + ~~((end.x - start.x) / 3),
        mm = ff + ~~((end.x - start.x) / 3),
        ratio = end.x >= start.x ? (Math.max(current, ff) == current ? (Math.max(current, mm) == current ? s : m) : f) : (Math.max(current, ff) == current ? f : (Math.max(current, mm) == current ? m : s)),
        mp = {
          x: end.x - start.x,
          y: end.y - start.y
        };
      return {
        x: Math.abs(mp.x / ratio),
        y: Math.abs(mp.y / ratio)
      }
    }
    
    //根据计算出来的移动值去移动
    //如果目标坐标大于原始坐标则向右移动，最大不能超过目标坐标，反之向左移动最小不能小于目标坐标
  move() {
    var movepos = this.moveFun(this.opos, this.tpos, this.x);
    this.x = (this.opos.x > this.tpos.x) ? Math.max(this.x - movepos.x, this.tpos.x) : Math.min(this.x + movepos.x, this.tpos.x)
    this.y = this.opos.y > this.tpos.y ? Math.max(this.y - movepos.y, this.tpos.y) : Math.min(this.y + movepos.y, this.tpos.y)
    this.r = Math.max(Math.abs((this.r - Math.random() / 1.2).toFixed(2)), 0)
  }
}
class BigCircle {
  constructor(x, y) {
    this.bR = random(16, 32)
    this.overR = random(60, 100)
    this.x = x
    this.y = y
    this.op = 1
  }
  creatBigCircle(ctx) {
    ctx.beginPath()
    ctx.arc(this.x, this.y, this.bR, 0, 2 * Math.PI)
    ctx.closePath()
    ctx.strokeStyle = "rgba(128, 128, 128, " + this.op + ")"
    ctx.stroke()
  }
  changeR() {
    this.bR = Math.min(this.bR += random(1, 4), this.overR);
    this.op = Math.max((this.op - Math.random() / 12).toFixed(2), 0)
  }
  //检查是否运行完毕，以大圆为标准清空屏幕
  complete() {
    return this.bR >= this.overR && this.op <= 0;
  }
}
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
window.clearRequestTimeout = window.cancelAnimationFrame || window.mozCancelRequestAnimationFrame || window.webkitCancelRequestAnimationFrame || window.msCancelRequestAnimationFrame;
let c = document.getElementById("fireworks"),
  w = c.width = c.offsetWidth,
  h = c.height = c.offsetHeight,
  ctx = c.getContext("2d"),
  nums = 40,
  circles = [],
  bCircle = null,
  animationId = false;
let int = function(x, y) {
  circles = []
  if (animationId) clearRequestTimeout(animationId)
  for (let i = nums; i-- > 0;) {
    circles.push(new Circle(x, y))
  }
  bCircle = new BigCircle(x, y)
  creat()
}
let creat = function() {
  ctx.clearRect(0, 0, w, h);
  circles.forEach(function(v) {
    v.move();
    v.creatCircle(ctx)
  })
  bCircle.changeR()
  bCircle.creatBigCircle(ctx)
  animationId = requestAnimationFrame(creat)
  if (bCircle.complete()) {
    //以大圆为标准，清空屏幕停止动画
    ctx.clearRect(0, 0, w, h);
    clearRequestTimeout(animationId)
  }
}
c.onclick = function(e) {
  e = e || window.event;
  int(e.clientX, e.clientY)
}

html为

</>复制代码

云服务器 GPU云服务器 js鼠标点击效果放烟花效果 html鼠标出现鼠标点击

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83391.html

canvas 简易时钟

摘要：简易版时钟时钟清除画布，每次执行重新绘图，解决时钟模糊，边框有锯齿。 canvas 简易版时钟 showImg(https://segmentfault.com/img/bVDNx7?w=405&h=370); 时钟 *{ margin:0; padding:0; } bod...

高胜山 2019-08-20 11:28 评论0 收藏0
canvas 简易时钟

摘要：简易版时钟时钟清除画布，每次执行重新绘图，解决时钟模糊，边框有锯齿。 canvas 简易版时钟 showImg(https://segmentfault.com/img/bVDNx7?w=405&h=370); 时钟 *{ margin:0; padding:0; } bod...

sugarmo 2019-08-01 15:48 评论0 收藏0
每周一点canvas动画——《支付宝价格拖动选择》

摘要：主要功能就是拖动标尺变动价格。整个标尺的长度为，步长为元。金额显示首先，增加一个输入框，然后获取它。输入金额移动标尺标尺的移动除了拖动以外，我们也希望通过金额输入框来达到。效果源码终于到年底了，再过两天我也要回家过年了，想想就激动呢！今天给大家带来一个基于移动端的canvas价格选择效果。 showImg(https://segmentfault.com/img/bV3QGd?w...

snifes 2019-08-26 11:43 评论0 收藏0

发表评论

登陆后可评论

0条评论

denson

男|高级讲师

我要关注我要私信

TA的文章

pacificrack黑五优惠：混合服务器3折，低至$30/月，E5-2650v2/16G/240G

阅读 2699·2021-11-22 12:05
学stm32有机会进大公司吗？如何选择？

阅读 3587·2021-10-14 09:42
舍利云：日本vps电信联通CN2移动直连2核2G内存5M带宽28.8元起

阅读 1817·2021-07-28 00:15
自适应和响应式

阅读 2117·2019-08-30 11:08
【学习笔记】CSS深入理解之float

阅读 1624·2019-08-29 17:31
snippet,让你编码效率翻倍

阅读 1053·2019-08-29 16:42
JS 1-数据类型

阅读 2469·2019-08-26 11:55
javascript 数组的常用方法

阅读 2243·2019-08-26 11:49

资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

canvas 鼠标点击出现烟花效果

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

相关文章

canvas 简易时钟

canvas 简易时钟

**每周一点canvas动画——《支付宝价格拖动选择》**

发表评论

0条评论

denson

男|高级讲师

TA的文章

pacificrack黑五优惠：混合服务器3折，低至$30/月，E5-2650v2/16G/240G

学stm32有机会进大公司吗？如何选择？

舍利云：日本vps电信联通CN2移动直连2核2G内存5M带宽28.8元起

自适应和响应式

【学习笔记】CSS深入理解之float

snippet,让你编码效率翻倍

JS 1-数据类型

javascript 数组的常用方法

最新活动