js+canvas实现粒子特效（跟随鼠标动）

如何利用元素js+canvas实现粒子动态特效，并且跟随鼠标变化。下面web建站小编给大家详细介绍一下具体实现代码！

具体实现代码如下：

复制代码class Particle {
  constructor(opts) {
    this.x = 0
    this.y = 0
    this.r = 0
    this.vx = 0
    this.vy = 0
    this.fillStyle = '#000'
    this.strokeStyle = 'rgba(0, 0, 0, 0)'
    this.theta = randomNum([0, Math.PI])
  
    Object.assign(this, opts)
    return this
  }
  render(ctx) {
    let {
      x,
      y,
      r,
      vx,
      vy,
      fillStyle,
      strokeStyle
    } = this
  
    ctx.save()
    ctx.translate(x, y)
    ctx.fillStyle = fillStyle
    ctx.beginPath()
    ctx.arc(0, 0, r, 0, 2 * Math.PI)
    ctx.fill()
    ctx.restore()
  
    return this
  }
}

function randomNum(arr, int) {
  const max = Math.max(...arr)
  const min = Math.min(...arr)
  const num = Math.random() * (max - min) + min
  
  return int ? Math.round(num) : num
}

let colors = ['pink', 'blue', 'lightpink', 'lightblue', 'lightskyblue', '#FF33FF', '#FF99FF'];
function randomColor(colors) {
  return colors[randomNum([0, colors.length - 1], true)]
}

const canvas = document.querySelector('#canvas')
const ctx = canvas.getContext('2d')

let W = canvas.width = window.innerWidth
let H = canvas.height = window.innerHeight

let mouse = {
  x: W / 2,
  y: H / 2
}

canvas.addEventListener('mousemove', function(e) {
  mouse.x = e.clientX
  mouse.y = e.clientY
})

canvas.addEventListener('mouseout', function() {
  mouse = {
    x: W / 2,
    y: H / 2
  }
})

let particles = [],
  particleNum = 0
let force, theta

function createParticle() {
  for (let i = 0; i < particleNum; i++) {
    particles.push(new Particle({
      x: mouse.x,
      y: mouse.y,
      r: randomNum([5, 40]),
      vx: Math.sin(theta) * force,
      vy: Math.cos(theta) * force,
      fillStyle: randomColor(colors),
      wander: randomNum([0.5, 2]),
      drag: randomNum([0.9, 0.99])
    }))
  }
}

function move(p, i) {
  p.x += p.vx
  p.y += p.vy
  p.vx *= p.drag
  p.vy *= p.drag
  p.theta += randomNum([-0.5, 0.5]) * p.wander
  p.vx += Math.sin(p.theta) * 0.1
  p.vy += Math.cos(p.theta) * 0.1
  p.r *= 0.96
  if (p.r <= 0.5) {
    particles.splice(i, 1)
  }
} 

function draw(p, i) {
  p.render(ctx)
};

(function updating() {
  window.requestAnimationFrame(updating)
  ctx.clearRect(0, 0, W, H)
  ctx.globalCompositeOperation = 'lighter'
  
  particleNum = randomNum([1, 4])
  force = randomNum([2, 8])
  theta = randomNum([0, 2 * Math.PI])
  createParticle()
  
  particles.forEach(move)
  particles.forEach(draw)
})()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123

一款用于在网页上生成五彩纸屑特效的JavaScript库——Canvas Confetti

利用js做一个炫酷音乐背景效果

html5+canvas如何做一个彩色六角菱形背景

html5如何清除canvas画布（附代码）

vue如何利用canvas做一个电子签名功能？

标签： canvas, 粒子特效, 鼠标事件

上面是“js+canvas实现粒子特效（跟随鼠标动）”的全面内容，想了解更多关于 js 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_3569.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！