前言：

在开发公司项目的时候，遇到了直播间的一些功能，其中点赞冒泡飘心，就折腾了好久，canvas学的不好，自己写不来，百度找了一堆都是js原生写法，迁移到vue项目里来好多问题，百度也解决不了。自己试着慢慢解决，竟然在不知不觉中通了！废话不多说，直接上代码，复制粘贴即可使用

示例：

不动就不动吧.png

```第一步```：先在外部新建一个js文件,取名index.js（名字自己随便取）

index.js代码内容如下：

/**
 * LikeHeart
 * @version: 1.0.0
 * @author tennylv
 * @date 2018-05-24
 *
 */
'use strict';
(function (root, factory) {
    if (typeof exports === 'object') {
        module.exports = factory();
        //CMD
    } else if (typeof define === 'function' && define.amd) {
        define(factory);
        //AMD
    } else {
        //WINDOW
        root.LikeHeart = factory(); 
    }
})(this, function() {

    var LikeHeart = function(opt) {

        /**
         * 初始化心
         * 
         * @param {object} 
         * @object.x {number} 心起点位置x
         * @object.y {number} 心起点位置y
         * @object.endX {number} 心结束位置x
         * @object.endY {number} 心结束位置y
         * @object.height {number} 高
         * @object.width {number} 宽
         * @object.angelBegin {number} 左右摇摆起始角度(可为负值)
         * @object.angelEnd {number} 左右摇摆结束角度
         * @object.angleLeft {bool} 是否起始从坐往右摇摆
         * @object.noScale {bool} 是否使用缩放心动画
         * @object.scaleDis {number} 缩放心临界值(默认从起始位置到升高50)
         * @object.noFadeOut {bool} 是否使用fadeOut
         * @object.opacityDis {number} fadeout心临界值(默认距离结束位置40)
         * @object.speed {number} 上升速度 
         * @object.bezierPoint {obj} 贝塞尔曲线4个点的值参考https://aaaaaaaty.github.io/bezierMaker.js/playground/playground.html
         * @object.fadeOut {function}  每个心fadeOut之后回调
         * @object.image {obj} 图片对象
         */


          this.id = opt.id;
          this.x = opt.x;
          this.y =  opt.y;
          this.endX = opt.endX;
          this.endY =  opt.endY;
          this.orignY = opt.y;
          this.height = opt.height;
          this.width = opt.width;
          this.angle = 0;
          this.angleLeft = opt.angleLeft;
          this.angelBegin = opt.angelBegin || (-20 + rand(1,2));
          this.angelEnd = opt.angelEnd || (20 + rand(1,4));
          this.scale = 0;
          this.scaleDis = opt.scaleDis || 50;
          this.opacityDis = opt.opacityDis || 40;
          this.noScale = opt.noScale;
          this.noAngel = opt.noAngel;
          this.opacity = 1;
          this.speed = opt.speed || 0.0027;
          this.bezierPoint = opt.bezierPoint;
          this.bezierDis = 0;
          this.onFadeOut = opt.onFadeOut;
          this.IMG = opt.image;

          this.move = function (ctx) {

            if (this.opacity === 0) {

                this.onFadeOut && this.onFadeOut(this);
            }

            this.y = getBezierLine(this).yt;
            this.x = getBezierLine(this).xt;


            this.angle = rangeAngle(this);
            this.scale = getFScale(this);
            this.opacity = getFAlpha(this);


            ctx.save();
            ctx.translate(this.x, this.y);
            ctx.rotate(this.angle*(Math.PI/180));
            ctx.scale(this.scale, this.scale);
            ctx.globalAlpha = this.opacity;

            ctx.drawImage(this.IMG, -(this.IMG.width/2), -(this.IMG.height/2), this.width, this.height);
            ctx.restore();
          };

    };


    /**
     * 计算心左右摇摆的方法
     */
    function rangeAngle(heart) {
        if (heart.noAngel) {
            return 0;
        }
        let _angle = heart.angle;

        // 心介于[start, end]之间不断变化角度
        if(_angle >= heart.angelEnd) {
            // 角度不断变小，向左摇摆
            heart.angleLeft = false;
        } else if (_angle <= heart.angelBegin){
            // 角度不断变大，向又摇摆
            heart.angleLeft = true;
        }

        // 动态改变角度
        if (heart.angleLeft) {
            _angle = _angle + 1;
        } else {
            _angle = _angle - 1;
        }

        return _angle;

    }


    /**
     * 计算缩放角度的方法
     */
    function getFScale(heart){
        if (heart.noScale) {
            return 1;
        }
        let _scale = heart.scale;


        // 随着距离起始点的距离增加，scale不断变大
        let dis = heart.orignY - heart.y;
        _scale = (dis / heart.scaleDis);

        // 当大于设置的阈值时变成1
        if (dis >= heart.scaleDis) {
            _scale = 1;
        }

        return _scale;
    }

    /**
     * 计算透明度的方法
     */
    function getFAlpha(heart) {

        let _opacity = heart.opacity;

        let dis = heart.y - heart.endY;

        if (dis <= heart.opacityDis) {

            _opacity = Math.max((dis / heart.opacityDis), 0);

        } else {
            _opacity = 1;
        }
        return _opacity;
    }

    /**
     * 获得min-max的随机整数
     */
    function rand (min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    /**
     * 获得贝塞尔曲线路径
     * 一共4个点
     */
    function getBezierLine(heart){
        var obj = heart.bezierPoint;
        var p0 = obj.p0;
        var p1 = obj.p1;
        var p2 = obj.p2;
        var p3 = obj.p3;
        var t = heart.bezierDis;
        var cx = 3 * (p1.x - p0.x),
            bx = 3 * (p2.x - p1.x) - cx,
            ax = p3.x - p0.x - cx - bx,

            cy = 3 * (p1.y - p0.y),
            by = 3 * (p2.y - p1.y) - cy,
            ay = p3.y - p0.y - cy - by,

            xt = ax * (t * t * t) + bx * (t * t) + cx * t + p0.x,
            yt = ay * (t * t * t) + by * (t * t) + cy * t + p0.y;

        heart.bezierDis += heart.speed;

        return {
            xt: xt,
            yt: yt
        }
    }

    return LikeHeart;

});
```第二步```：引入需要用到的页面
import LikeHeart from "../../../static/js/index";
```第三步```：直接复制下面这一段
<script>
import LikeHeart from "../../../static/js/index";
export default {
  props: ["ClassTimePlayer", "videoUrl"],
  data() {
    return {
      width: 175, //初始宽度
      height: 400, //初始高度
      heartList: [], //初始数组
      heartCount: 0 //累加计数初始值
    };
  },
  methods: {
    getRandomDis() {
      if (Math.random() > 0.5) {
        return -(Math.random() * 43);
      } else {
        return +(Math.random() * 43);
      }
    },
    createHeart() {
      this.heartCount++;
      let positionArray = [
        {
          x: 100,
          y: 400,
          endX: 100,
          endY: 100
        }
      ];
      let img = new Image();
      // img.src = "../../static/img/" + Math.ceil(Math.random() * 2) + ".png";
      img.src = `../../static/img/${Math.ceil(Math.random() * 5)}.png`;
      let p1 = {
        x: 100 + this.getRandomDis(),
        y: 300 + this.getRandomDis()
      };
      let p2 = {
        x: 100 + this.getRandomDis(),
        y: 200 + this.getRandomDis()
      };
      return new LikeHeart({
        id: this.heartCount,
        x: positionArray[0].x,
        y: positionArray[0].y,
        endX: positionArray[0].endX,
        endY: positionArray[0].endY,
        onFadeOut: this.removeItem,
        noAngel: true,//决定是否从小到大
        // noScale: true,//决定是否左右摆动
        width: 30, //决定心的大小
        height: 30,
        image: img,
        bezierPoint: {
          p0: {
            x: positionArray[0].x,
            y: positionArray[0].y
          },
          p1: p1,
          p2: p2,
          p3: {
            x: positionArray[0].endX,
            y: positionArray[0].endY
          }
        }
      });
    },
    removeItem(item) {
      var array = [];
      for (var i = 0; i < this.heartList.length; i++) {
        if (this.heartList[i].id !== item.id) {
          array.push(this.heartList[i]);
        }
      }
      this.heartList = array;
    },
    },

    
    
 
  mounted() {
    // 飘心
    var _this = this;
    var ctx = document.getElementById("cvs").getContext("2d");
    (ctx.canvas.width = _this.width),
      (ctx.canvas.height = _this.height),
      (function loop() {
        ctx.clearRect(0, 0, _this.width, _this.height);
        _this.heartList.forEach(function(item) {
          item && item.move(ctx);
        });
        requestAnimationFrame(loop);
      })();
    setInterval(function() {
      _this.heartList.push(_this.createHeart());
    }, 700);
    document.getElementById("cvs").addEventListener(
      "click",
      function() {
        console.log(111111)
        _this.heartList.push(_this.createHeart());
      },
      false
    );
  },
};
</script>
图片自己去换，至于在哪里换  
img.src = `../../static/img/${Math.ceil(Math.random() * 5)}.png`;
这个就是咯
  ```最后一步```：在html里，写上这个 
    <!-- 飘心 -->
    <canvas id="cvs"></canvas>

收尾：

然后就实现了。这个代码我也是百度的某个大神的，最后说明下不是我写的哈。迁移到vue中稍微修改了一下，勿喷。