SOURCE

var can = document.getElementById('can'),
//画布对象
pan,
//获取2D图像API接口
index = 0,
//用来接收setinerval的值
flag = true,
//用来控制心电图折线的运行方向
wid = 400,
//获取浏览器宽度
hei = 400,
//获取浏览器高度
x = 0,
//心电图的“点”在画布上的x轴坐标，从0开始
y = hei / 2; //心电图的“点”在画布上的y轴坐标，从页面y轴居中位置开始

start();

function start() {
  can.height = hei; //设置画布高度
  can.width = wid; //设置画布宽度
  pan = can.getContext("2d"); //获取2D图像API接口
  pan.strokeStyle = "#08b95a"; //设置画笔颜色
  pan.lineJoin = "round"; //设置画笔轨迹基于圆点拼接
  pan.lineWidth = 2; //设置画笔粗细
  pan.beginPath(); //开始一条画笔的路径
  pan.moveTo(x, y); //定位我们的“落笔点”
  index = setInterval(move, 20); //让我们的画笔动起来
};

function move() {
  x++; //x轴是始终运动的，所以x一直自增
  if (x < 40) {
    //前100px，我们不希望做垂直运动，让点只沿垂直方向运动即可，所以不做任何操作
  } else {
    if (x >= wid - 40) {
      //最后的100px，同样希望心电图只做水平运动，不会上下波动，所以不做任何操作
      y=hei / 2;
    } else {
      //为了让心电图看起来更加逼真，我们希望心电图在运动时每次的波峰和波谷都是随机的，这样更类似于人类的心跳，所以我们给它一个随机值z
      var z = Math.random() * 180;

      if (y <= z) {
        //画布的坐标是从左上角开始计算的，也就是最左上角的点的坐标是（0,0）,y是当前画笔所在坐标的y轴，假如y小于z，就代表y已经到达波峰位置，准备开始向波谷运动
        flag = true
      }
      if ((hei - y) <= z) {
        //假如当前画笔在y轴的坐标y距离浏览器底部hei的差值已经小于随机值z，代表当前的画笔已经运行到波谷位置，准备转向波峰位置运动
        flag = false
      }
      if (flag) {
        //假如flag为true，代表画笔仍然向波谷位置前进，需要花点功夫理解的是，因为画布左上角的点的坐标是（0,0），所以y的值越大，画笔在y轴的位置越靠近浏览器底部，所以向波谷运动时，y的值是不断增加的，同时为了让波峰波谷更陡峭，我这里设置y += 5，
        y += 3
      } else {
        //假如flag为false，表示向波峰运动，y的值是不断减小的
        y -=3
      }
    }
  }
  if (x == wid) {
    //当画笔运动到浏览器右侧边缘，停止绘图
    pan.closePath();
    //清除循环
    clearInterval(index);
    //将index置零，准备下一次循环
    index = 0;
    //重新定位画笔到屏幕左侧上下居中的位置
    x = 0;
    y = hei / 2;
    flag = true;
    //重新进行下一次心电图的绘制
    start();
  }
  //lineTo和stroke函数负责描绘运动轨迹
  pan.lineTo(x, y);
  pan.stroke();
}

<div class="heartBeat">
  　　
  <canvas id="can">
    Canvas画板
  </canvas>
</div>