想了解更多开源请访问：开源基础软件社区https://ost.51cto.com今天来复刻一颗可以呼吸的心呼吸。前阵子电视剧《燃烧我，温暖你》里，一颗会呼吸的心，让很多开发者重现了...1.原剧中复刻效果的效果2.元素逆向工程分析原作剧，首先是心的轮廓。心脏内外有许多随机分布的点，心脏向内膨胀大于向外膨胀，故有呼吸作用。但显然原剧中的爱情不应该单靠代码来实现。让我们完成一个元素：最外层心脏的轮廓。轮廓周围随机分布的点。内层比外层跳动更多。如果我们想要内部和外部有不同程度的膨胀，我们可能需要使用两个画布实例，给它们添加动画，并且内部膨胀大于外部画布。3.代码实现javascriptexportdefault{data:{title:""},onInit(){this.title=this.$t('strings.world');},onShow(){this.heart();这。心脏2（）；},heart(){constcvs=this.$refs.canvas;constctx=cvs.getContext('2d');常量宽度=1080；常量高度=1080；//计算弧度letradian=0letradian_add=Math.PI/180//调整位置ctx.translate(width/3,height/2)//阴影ctx.shadowBlur=10//平滑角ctx.lineJoin='round'//Colorctx.shadowColor='rgba(255,255,255,1.00)'ctx.strokeStyle='rgba(255,0,114,1.00)'//用两个点阵画心，一个大一点小一点增加等级constpoints=[]constmpoints=[]while(radian<=Math.PI*2){radian+=radian_add//(x,y)表示心脏的坐标，16的心脏更大让x=这个。getX(radian,16)让y=this.getY(radian,16)points.push({x,y,//随机分布列表：newArray(10).fill('').map(v=>{constfw=100constfx=x+Math.random()*fw-fw/2constfy=y+Math.random()*fw-fw/2return{x:x,y:y,endX:fx,endY:fy,stepX:x>fx?-1:1,stepY:y>fy?-1:1,parentX:x,parentY:y}})})//保存一个较小的心脏x=this.getX(radian,14)y=this.getY(radian,14)//ctx.lineTo(x,y)mpoints.push({x,y,list:newArray(10).fill('').map(v=>{constfw=100constfx=x+Math.random()*fw-fw/2constfy=y+Math.random()*fw-fw/2return{x:x,y:y,endX:fx,endY:fy,stepX:x>fx?-1:1,stepY:y>fy?-1:1,parentX:x,parentY:y}})})}constrender=()=>{ctx.beginPath()ctx.clearRect(-width/2,-height/2,width,height)//设置粗细ctx.lineWidth=1//绘制mpoints.forEach(v=>{v.list.forEach(k=>{ctx.moveTo(k.x,k.y)ctx.lineTo(k.x+ctx.lineWidth,k.y+ctx.lineWidth)k.x+=k.stepXk.y+=k.stepYif(k.stepX>0){if(k.x>k.endX){k.x=k.endX}}else{if(k.x
