前言：

在开发公司项目的时候，遇到了直播间的一些功能，其中点赞冒泡飘心，就折腾了好久，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中稍微修改了一下，勿喷。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。