520情人节到了，作为程序猿的我用代码给女朋友送了一个礼物「可以拿去送给自己喜欢的人」

妈妈再也不担心我找不到女朋友了,~

谁说我们程序猿不浪漫，马上要到520情人节了。当你在为女朋友买什么礼物犯愁的时候，不妨花点时间给她送个别样的礼物。更能体现你的真心，何乐而不为了？

点↓↓↓下方链接即可查看线上地址

❤在线演示地址

在这里插入图片描述

❤来点樱花点缀一下吧

在这里插入图片描述

❤文件目录

在这里插入图片描述

❤html

<!--
 * @Author: your name
 * @Date: 2021-03-12 09:05:12
 * @LastEditTime: 2021-03-12 09:05:20
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \canvas绘制爱心❤\index.html
-->
<!DOCTYPE html>
<html>
  <head>
    <title></title>
  </head>
  <style>
    * {
     
     
      padding: 0;
      margin: 0;
    }
    html,
    body {
     
     
      height: 100%;
      padding: 0;
      margin: 0;
      background: #000;
    }
    canvas {
     
     
      position: absolute;
      width: 100%;
      height: 100%;
    }
    .aa {
     
     
      position: fixed;
      left: 50%;
      bottom: 10px;
      color: #ccc;
    }
  </style>
  <body>
    <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;
        };
	... 关注下方公众号回复005 即可获取源码 
    </script>
  </body>
</html>