女神节告白代码

淩亂°似流年 2024-03-26 19:06 72阅读 0赞

> ### 今天是女神节，送给所有女神们一句话： ###
> 
> ### 爱自己是终生浪漫的开始，无论何时都要好好爱自己 ###

**目录**

1. 请求动画帧填充

2.点类

3.粒子类

编辑 4.ParticlePool 池类

5.创建和填充

6.处理循环队列

7.更新活动粒子

8.移除非活性粒子

9.绘制有源粒子

10.整合

编辑 11.进行样式表达

12.使用虚拟画布创建粒子图像

13.用来创建路径的辅助器功能

14.创建路径

15.创建填充

15.创建图像

16.做出成果

17.创建新的粒子

18.更新和绘制粒子

19.重新处理画布大小

20. 延迟渲染引导

21.全部代码

--------------------

![b4974609e81248d0ba552dd8df526298.gif][]

今天我们来写表白爱心代码

![4dcfe8474737414f981d4e803e35f440.png][]

首先HTML里body只要写两行代码就可以了，后面都是js代码了

我们的样式css代码如下：

![50d4dbb904614cef88218b7150e94de3.png][]

首先我们先定义一个Settings

![63797706c61e445b9f7decf3c1055ee2.png][]

### 1. 请求动画帧填充 ###

RequestAnimationFrame polyfill by Erik M?ller

![a51e137d6baf4ee6a856f827b9500d45.png][]

### 2.点类 ###

Point class

![0ec26ac09a484b06a5d417d544326970.png][]

### 3.粒子类 ###

Particle class

### ![e99d355714b24458913a2d2932144e79.png][] 4.ParticlePool 池类 ###

ParticlePool class

![a3681e690d9a4f79aa70f4d7cde87dd1.png][]

### 5.创建和填充 ###

create and populate particle pool

![e1cd91517f984847b0c2b3357f70655c.png][]

### 6.处理循环队列 ###

handle circular queue

![8dcf3056344d4dcab49764ba74760dd8.png][]

### 7.更新活动粒子 ###

update active particles

![1324d649a70d4913ba27edca636d68f7.png][]

### 8.移除非活性粒子 ###

remove inactive particles

![9b2a5826fc1e4f48b886e3a54343eaf3.png][]

### 9.绘制有源粒子 ###

draw active particles

![688856fefe4740b5b6f76f1528410a80.png][]

### 10.整合 ###

Putting it all together

### ![7f2fd57bf4054c59a8edefdb1a55dbae.png][] 11.进行样式表达 ###

get point on heart with -PI <= t <= PI

![a7102650af11496dacfd0dac35dd8e2e.png][]

### 12.使用虚拟画布创建粒子图像 ###

creating the particle image using a dummy canvas

![c36dfba7e0174244b8827df16ffac3a2.png][]

### 13.用来创建路径的辅助器功能 ###

helper function to create the path

![2fad8823c8b647c0ac2de87be3adc614.png][]

### 14.创建路径 ###

create the path

![92ff4ce3a4154e1994f0570427f986fa.png][]

### 15.创建填充 ###

![0730a054c40944b1974829205360d1cd.png][]

### 15.创建图像 ###

![fb737d05a85346ec8abdcdc80596ac97.png][]

### 16.做出成果 ###

![8c776d70812942cca3f4fe6a55f904c4.png][]

### 17.创建新的粒子 ###

![1859d403212946fdb03b2f6b0b06c486.png][]

### 18.更新和绘制粒子 ###

update and draw particles

![59eb8156b80d47e393cf84d8299d6526.png][]

### 19.重新处理画布大小 ###

![fbda7ef6fb134526989a473385760196.png][]

### 20. 延迟渲染引导 ###

delay rendering bootstrap

![37191c11ec7b47c0b317f9031a90cee2.png][]

### 21.全部代码 ###

<!DOCTYPE html>
    <html>
      <head>
        <title></title>
      </head>
      <style>
        * {
          padding: 0;
          margin: 0;
        }
        html,
        body {
          height: 100%;
          padding: 0;
          margin: 0;
          background: rgb(253, 253, 253);
        }
        canvas {
          position: absolute;
          width: 100%;
          height: 100%;
        }
        .aa {
          position: fixed;
          left: 50%;
          bottom: 10px;
          color: #ccc;
        }
        h1{
            text-align: center;
            padding-top: 100px;
        }
      </style>
      <body>
          <h1>女神节快乐！</h1>
        <canvas id="pinkboard"></canvas>
    
    
        <script>
          /*
           * Settings
           */
          var settings = {
            particles: {
              length: 500, // maximum amount of particles
              duration: 2, // particle duration in sec
              velocity: 100, // particle velocity in pixels/sec
              effect: -0.75, // play with this for a nice effect
              size: 30 // particle size in pixels
            }
          };
    
          /*
           * RequestAnimationFrame polyfill by Erik M?ller
           */
          (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) {
              // create and populate particle pool
              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);
    
              // handle circular queue
              firstFree++;
              if (firstFree == particles.length) firstFree = 0;
              if (firstActive == firstFree) firstActive++;
              if (firstActive == particles.length) firstActive = 0;
            };
            ParticlePool.prototype.update = function (deltaTime) {
              var i;
    
              // update active particles
              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);
              }
    
              // remove inactive particles
              while (
                particles[firstActive].age >= duration &&
                firstActive != firstFree
              ) {
                firstActive++;
                if (firstActive == particles.length) firstActive = 0;
              }
            };
            ParticlePool.prototype.draw = function (context, image) {
              // draw active particles
              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;
          })();
    
          /*
           * Putting it all together
           */
          (function (canvas) {
            var context = canvas.getContext("2d"),
              particles = new ParticlePool(settings.particles.length),
              particleRate =
                settings.particles.length / settings.particles.duration, // particles/sec
              time;
    
            // get point on heart with -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
              );
            }
    
            // creating the particle image using a dummy canvas
            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 create the path
              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;
              }
              // create the path
              context.beginPath();
              var t = -Math.PI;
              var point = to(t);
              context.moveTo(point.x, point.y);
              while (t < Math.PI) {
                t += 0.01; // baby steps!
                point = to(t);
                context.lineTo(point.x, point.y);
              }
              context.closePath();
              // create the fill
              context.fillStyle = "red";
              context.fill();
              // create the image
              var image = new Image();
              image.src = canvas.toDataURL();
              return image;
            })();
    
            // render that thing!
            function render() {
              // next animation frame
              requestAnimationFrame(render);
    
              // update time
              var newTime = new Date().getTime() / 1000,
                deltaTime = newTime - (time || newTime);
              time = newTime;
    
              // clear canvas
              context.clearRect(0, 0, canvas.width, canvas.height);
    
              // create new particles
              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
                );
              }
    
              // update and draw particles
              particles.update(deltaTime);
              particles.draw(context, image);
            }
    
            // handle (re-)sizing of the canvas
            function onResize() {
              canvas.width = canvas.clientWidth;
              canvas.height = canvas.clientHeight;
            }
            window.onresize = onResize;
    
            // delay rendering bootstrap
            setTimeout(function () {
              onResize();
              render();
            }, 10);
          })(document.getElementById("pinkboard"));
        </script>
      </body>
    </html>

好了，这就是全部爱心代码了

今天是三八女神节，无论是小妹妹还是大姐姐，我都想对我的同性说：生活处处充满美好，无论身处什么逆境，都应该往前看，一切都会过去的，我们女性大部分都会因为感情，学业，家庭的等困扰所影响，我一直觉得感情应该以佛系的态度看待，学业，努力向上我觉得就很幸福，自己想要的自己去努力争取，不去依附她人，做自己的女王，你就是这个世界最闪闪发光的人！！！

#### 今天的分享就到此结束了 ####

#### **创作不易点赞评论互关三连** ####

![c7a579659984427c951f24021bdb4be8.gif][]

[b4974609e81248d0ba552dd8df526298.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/24b2639c2906405fa5c3163f2dd1426e.png
[4dcfe8474737414f981d4e803e35f440.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/8153f1a2a80a4acabe2b625e97f6a9a7.png
[50d4dbb904614cef88218b7150e94de3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/c2fbc22da3ac470b94cd58d7d95cdec3.png
[63797706c61e445b9f7decf3c1055ee2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/ecbffb02b3ab48268a1e0854864ae25c.png
[a51e137d6baf4ee6a856f827b9500d45.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/a8afe725cd2548fc87dcace8eb66a8c4.png
[0ec26ac09a484b06a5d417d544326970.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/e717e7bbba4b469f976de6a1463027c8.png
[e99d355714b24458913a2d2932144e79.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/2a7adb03bdf24c3fbaa9e1ff65422b32.png
[a3681e690d9a4f79aa70f4d7cde87dd1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/8efa5403001a44b4b972378abe8b9001.png
[e1cd91517f984847b0c2b3357f70655c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/e89c6865c64b4508b21efbe0b889d73b.png
[8dcf3056344d4dcab49764ba74760dd8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/34ea085807d646e89b280e4290de3897.png
[1324d649a70d4913ba27edca636d68f7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/744a38c8dd7e4512a377d8b8e05e6284.png
[9b2a5826fc1e4f48b886e3a54343eaf3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/41629d5d89d944aba3e1152123a3dfef.png
[688856fefe4740b5b6f76f1528410a80.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/9d4ad9aa4e8d4b879bc65955eef52f40.png
[7f2fd57bf4054c59a8edefdb1a55dbae.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/c24adacae80e4a2f998f3ced36ae3f73.png
[a7102650af11496dacfd0dac35dd8e2e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/a4212999c60c4f83a1c97adb5004d4a1.png
[c36dfba7e0174244b8827df16ffac3a2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/a104474baa324bc5b014e4f5f0ccaf7e.png
[2fad8823c8b647c0ac2de87be3adc614.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/1f406fbdd53540a5999aab4b4505218c.png
[92ff4ce3a4154e1994f0570427f986fa.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/0efc24689e144d87937d46b8e454a623.png
[0730a054c40944b1974829205360d1cd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/06d0861f55304095be83e5f1509a37e8.png
[fb737d05a85346ec8abdcdc80596ac97.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/aa96f64fca564999ad6e8657b789d6cb.png
[8c776d70812942cca3f4fe6a55f904c4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/91f7d3a36f46460ba088c0d63a7382c1.png
[1859d403212946fdb03b2f6b0b06c486.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/14fec38c6c2e4a5a967015ab1049a94d.png
[59eb8156b80d47e393cf84d8299d6526.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/1abce3a0546747a9be82942acc362406.png
[fbda7ef6fb134526989a473385760196.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/991c123a4b2e49fbb14fa7fb19d963a7.png
[37191c11ec7b47c0b317f9031a90cee2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/618f7b8ea7d14d42a743d19ec94c38f5.png
[c7a579659984427c951f24021bdb4be8.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/ea59c675920c4ebd8f1cb32cd40ec789.png