爱心动画效果，教你如何更改颜色背景的爱心

在这里插入图片描述

如何运行该代码？

方法一：

1.创建一个.txt文件

在这里插入图片描述

2.把代码复制粘贴cv进去，并将其保存下来ctrl+s
在这里插入图片描述

3.改后缀名，将.txt改为.html
在这里插入图片描述

此时图标变了
在这里插入图片描述

4.此时点击，即可看见爱心效果

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-78ZIIGXM-1669524895740)(D:\总结\2css\css校内实习\img\image-20221127124755799.png)]$

方法二：

vscode dddd🐱‍🐉

关于修改样式

修改背景颜色

使用rgb，#等颜色值都可以

[)(D:.png)]

修改爱心颜色

在创建图形函数中，var image = (function ()

[)(D7125g)]

完整代码

DOCTYPE html>
<html>

<head>
  <title>title>
  <script src="js/jquery.min.js">script>
head>
<style>
  * {
    padding: 0;
    margin: 0;
  }

  html,
  body {
    height: 100%;
    padding: 0;
    margin: 0;
    background: #000;
  }

  .container {
    width: 100%;
    height: 100%;
  }

  canvas {
    z-index: 99;
    position: absolute;
    width: 100%;
    height: 100%;
  }
style>

<body>
  
  <canvas id="pinkboard" class="container"> canvas>

body>

html>
<script>
  //  设置爱心
  var settings = {
    particles: {
      // 最大颗粒量，小爱心数量
      length: 500,
      // 粒子持续时间（秒），爱心延迟显示时长
      duration: 2,
      // 粒子速度（像素/秒）
      velocity: 100,
      // 爱心隐藏方向
      effect: -0.75,
      // 颗粒大小
      size: 30,
    },
  };
  // 匿名函数
  (function () {
    var b = 0
    var c = ["ms", "moz", "webkit", "o"]
    for (var a = 0; a < c.length && !window.requestAnimationFrame; ++a) {
      window.requestAnimationFrame = window[c[a] + "RequestAnimationFrame"]
      window.cancelAnimationFrame =
        window[c[a] + "CancelAnimationFrame"] ||
        window[c[a] + "CancelRequestAnimationFrame"]
    }
    if (!window.requestAnimationFrame) {
      window.requestAnimationFrame = function (h, e) {
        var d = new Date().getTime()
        var f = Math.max(0, 16 - (d - b))
        var g = window.setTimeout(function () {
          h(d + f)
        }, f)
        b = d + f
        return g
      }
    }
    if (!window.cancelAnimationFrame) {
      window.cancelAnimationFrame = function (d) {
        clearTimeout(d)
      }
    }
  })()
  /*
   * Point class
  */
  var Point = (function () {
    function Point (x, y) {
      this.x = typeof x !== "undefined" ? x : 0
      this.y = typeof y !== "undefined" ? y : 0
    }
    Point.prototype.clone = function () {
      return new Point(this.x, this.y)
    }
    Point.prototype.length = function (length) {
      if (typeof length == "undefined")
        return Math.sqrt(this.x * this.x + this.y * this.y)
      this.normalize()
      this.x *= length
      this.y *= length
      return this
    }
    Point.prototype.normalize = function () {
      var length = this.length()
      this.x /= length
      this.y /= length
      return this
    }
    return Point
  })()

  /*
   * Particle class
   */
  var Particle = (function () {
    function Particle () {
      this.position = new Point()
      this.velocity = new Point()
      this.acceleration = new Point()
      this.age = 0
    }
    Particle.prototype.initialize = function (x, y, dx, dy) {
      this.position.x = x
      this.position.y = y
      this.velocity.x = dx
      this.velocity.y = dy
      this.acceleration.x = dx * settings.particles.effect
      this.acceleration.y = dy * settings.particles.effect
      this.age = 0
    }
    Particle.prototype.update = function (deltaTime) {
      this.position.x += this.velocity.x * deltaTime
      this.position.y += this.velocity.y * deltaTime
      this.velocity.x += this.acceleration.x * deltaTime
      this.velocity.y += this.acceleration.y * deltaTime
      this.age += deltaTime
    }
    Particle.prototype.draw = function (context, image) {
      function ease (t) {
        return --t * t * t + 1
      }
      var size = image.width * ease(this.age / settings.particles.duration)
      context.globalAlpha = 1 - this.age / settings.particles.duration
      context.drawImage(
        image,
        this.position.x - size / 2,
        this.position.y - size / 2,
        size,
        size
      )
    }
    return Particle
  })()

  /*
   * ParticlePool class
   */
  var ParticlePool = (function () {
    var particles,
      firstActive = 0,
      firstFree = 0,
      duration = settings.particles.duration

    function ParticlePool (length) {
      // 创建和填充粒子池
      particles = new Array(length)
      for (var i = 0; i < particles.length; i++)
        particles[i] = new Particle()
    }
    ParticlePool.prototype.add = function (x, y, dx, dy) {
      particles[firstFree].initialize(x, y, dx, dy)

      // 处理循环队列
      firstFree++
      if (firstFree == particles.length) firstFree = 0
      if (firstActive == firstFree) firstActive++
      if (firstActive == particles.length) firstActive = 0
    }
    ParticlePool.prototype.update = function (deltaTime) {
      var i
      // 处理循环队列
      if (firstActive < firstFree) {
        for (i = firstActive; i < firstFree; i++)
          particles[i].update(deltaTime)
      }
      if (firstFree < firstActive) {
        for (i = firstActive; i < particles.length; i++)
          particles[i].update(deltaTime)
        for (i = 0; i < firstFree; i++) particles[i].update(deltaTime)
      }


      // 移除非活性粒子
      while (
        particles[firstActive].age >= duration &&
        firstActive != firstFree
      ) {
        firstActive++
        if (firstActive == particles.length) firstActive = 0
      }
    }
    ParticlePool.prototype.draw = function (context, image) {
      // 绘制活性粒子
      if (firstActive < firstFree) {
        for (i = firstActive; i < firstFree; i++)
          particles[i].draw(context, image)
      }
      if (firstFree < firstActive) {
        for (i = firstActive; i < particles.length; i++)
          particles[i].draw(context, image)
        for (i = 0; i < firstFree; i++) particles[i].draw(context, image)
      }
    }
    return ParticlePool
  })();
  /*
   * 把所有这些放在一起
   */
  (function (canvas) {
    var context = canvas.getContext("2d"),
      particles = new ParticlePool(settings.particles.length),
      particleRate =
        settings.particles.length / settings.particles.duration, // particles/sec
      time


    // 得到爱心的范围 -PI <= t <= PI
    function pointOnHeart (t) {
      return new Point(
        160 * Math.pow(Math.sin(t), 3),
        130 * Math.cos(t) -
        50 * Math.cos(2 * t) -
        20 * Math.cos(3 * t) -
        10 * Math.cos(4 * t) +
        25
      )
    }

    // 使用虚拟画布创建粒子图像
    var image = (function () {
      var canvas = document.createElement("canvas"),
        context = canvas.getContext("2d")
      canvas.width = settings.particles.size
      canvas.height = settings.particles.size
      // helper函数创建路径
      function to (t) {
        var point = pointOnHeart(t)
        point.x =
          settings.particles.size / 2 +
          (point.x * settings.particles.size) / 350
        point.y =
          settings.particles.size / 2 -
          (point.y * settings.particles.size) / 350
        return point
      }
      // 创建路径
      context.beginPath()
      var t = -Math.PI
      var point = to(t)
      context.moveTo(point.x, point.y)
      while (t < Math.PI) {
        t += 0.01
        point = to(t)
        context.lineTo(point.x, point.y)
      }
      context.closePath()
      // 创建填充
      context.fillStyle = "#b1191a"
      context.fill()
      // 创建图像
      var image = new Image()
      image.src = canvas.toDataURL()
      return image
    })()

    // 渲染那个东西
    function render () {
      // 下一动画帧
      requestAnimationFrame(render)

      // 更新时间
      var newTime = new Date().getTime() / 1000,
        deltaTime = newTime - (time || newTime)
      time = newTime

      // 透明帆布
      context.clearRect(0, 0, canvas.width, canvas.height)

      // 创建新粒子
      var amount = particleRate * deltaTime
      for (var i = 0; i < amount; i++) {
        var pos = pointOnHeart(Math.PI - 2 * Math.PI * Math.random())
        var dir = pos.clone().length(settings.particles.velocity)
        particles.add(
          canvas.width / 2 + pos.x,
          canvas.height / 2 - pos.y,
          dir.x,
          -dir.y
        )
      }

      // 更新和绘制粒子
      particles.update(deltaTime)
      particles.draw(context, image)
    }

    // 处理画布的大小
    function onResize () {
      canvas.width = canvas.clientWidth
      canvas.height = canvas.clientHeight
    }
    window.onresize = onResize

    //延迟渲染引导
    setTimeout(function () {
      onResize()
      render()
    }, 10)
  })(document.getElementById("pinkboard"))

script>
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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322

相关阅读:
三篇论文：速览GPT在网络安全最新论文中的应用案例
 jquery
3、AWS SDK for Go使用
 Yarn的状态机框架分析
 vue2-x6-dag自定义vue组件节点
 跟着Nature Plant学图形颜色搭配 | caecopal包
 【系统架构设计】架构核心知识： 2 云原生架构
 【Effective Python】读书笔记-06元类与属性
 “AccelerationMotionCount“ app Tech Support（URL）
在云栖深处见未来
原文地址：https://blog.csdn.net/m0_54088431/article/details/128063092