2020年的第一天；？？？（~~滑稽）。money。

先贴上效果动态图：

实现：

1. 先有一块土地：

   <div>
       <canvas id="gycanvasHeart" style="position: fixed;z-index: -1;"></canvas>
   </div>
   

2. 根据自己的需要选择是否需要将土地设为全屏：

   var width = document.documentElement.clientWidth;
   var height = document.documentElement.clientHeight;
   document.getElementById("gycanvasHeart").setAttribute("width",width);
   document.getElementById("gycanvasHeart").setAttribute("height",height);
   

3. 画布基本语法：

   //初始化
   var context = document.getElementById("gycanvasHeart").getContext("2d");
   

4. 设立一个心的参数方程的参考原点坐标：

   var x0 = width/2;
   var y0 = height/2;
   

5. 画心使用的对象：

   var str = "hsl(0,100%,50%)";//hsl(参数可以百度)最后颜色的组合
   

6. 用两个数组，将心的坐标存放起来：

   // 存储要画的点的位置和数量
   var px=new Array(6000);
   var py=new Array(6000);
   //左边的点存3000 右边的点从3001开始存
   var i=0;
   var j=3001;
   var big=10;
   //将  心  的坐标存入数组中  （参数方程）
   for(var t = -3; t <= 3; t += 0.001) {
       //坐标系的 x,y 函数
       x=16*Math.pow(Math.sin(t),3);
       y=13*Math.cos(t)-5*Math.cos(t*2)-2*Math.cos(t*3)-Math.cos(t*4);
       //可以调试心的大小
       x*=big;
       y*=big;
       //算出对于计算机的坐标 计算机左上角是0,0
       x=x0+x;
       y=y0-y;
       //存入数组
       if(x<x0)
       {
           px[i]=x;
           py[i]=y;
           i=i+1;
       }
       if(x>x0)
       {
           px[j]=x;
           py[j]=y;
           j=j+1;
       }
   }
   

7. 上下的就和之前迷宫的差不多了（将对象画在指定的位置）：

   function drawxin() {
       //变色
       d+=sd;
       str = "hsl(" + d + ",100%,50%)";
       context.fillStyle = str;
       context.globalAlpha = tmd;
       tmd= (flag==1) ? tmd-st : tmd+st;
       //小贞设置：坐标，长、宽
       context.clearRect(px[xin],py[xin],35,35);//利用迷宫的思想清除之前画的
       context.fillRect(px[xin],py[xin],35,35);
       //汉字
       // context.font = '40pt Calibri';
       // context.fillStyle = 'blue';
       // context.fillText("轩",px[xin],py[xin]);
       xin=(xin>=6000) ? 0 : xin+zzz; //等于6000表示画完一个心，初始化重新开始画心
       //控制透明度的循环
       if(tmd <= 0) {//当透明度等于0时结束画心
           flag=0;
       }else if(tmd >= 1){
           flag=1;
       }
   }
   

8. 一直画图事件：

   //每十毫秒画一次
   stop=setInterval(drawxin,1);
   

最后（下载链接）: 直接下载。。。

更多分享：http://wx0725.top/download.php