使用canvas简单绘制心电图

绘制心电图，首先就要绘制表格

先贴出html代码 ：

<canvas id="ecg" width="751px" height="751px" ></canvas>

然后是绘制表格的函数，此表格包含大中小三种格子，分别对应三种函数：

function drawSmallGrid(c_canvas){
   var context = c_canvas.getContext("2d");
      context.strokeStyle = "#f1dedf";
     context.strokeWidth=1;
      context.beginPath();
      for (var x = 0.5; x < 751; x += 3) {
          context.moveTo(x, 0);
          context.lineTo(x, 751);
          context.stroke(); 
       }




      for (var y = 0.5; y < 751; y += 3) {
          context.moveTo(0, y);
          context.lineTo(751, y);
          context.stroke(); 
      }
      context.closePath();
   return;
 } 
     
function drawMediumGrid(c_canvas){
       var context = c_canvas.getContext("2d");
        context.strokeStyle = "#f0adaa";
        context.strokeWidth=1;
        context.beginPath();
       for (var x = 0.5; x < 751; x += 15) {
          context.moveTo(x, 0);
          context.lineTo(x, 751);
          context.stroke(); 
       };



      for (var y = 0.5; y < 751; y += 15) {
          context.moveTo(0, y);
          context.lineTo(751, y);


          context.stroke(); 
      };
      context.closePath();
    return;
} 
 
   function drawBigGrid(c_canvas){
         var context = c_canvas.getContext("2d");
         context.strokeStyle = "#e0514b";
          context.strokeWidth=1;
          context.beginPath();
         for (var x = 0.5; x < 751; x += 75) {
            context.moveTo(x, 0);
            context.lineTo(x, 751);
            context.stroke(); 
         };




        for (var y = 0.5; y < 751; y += 75) {
            context.moveTo(0, y);
            context.lineTo(751, y);
            context.stroke(); 
        };
        context.closePath();
    return;
  }

然后是绘制心电图的函数：

function drawLine(c_canvas) {
  var ctx = c_canvas.getContext('2d');
  ctx.strokeStyle = "#000";
  ctx.strokeWidth = 1;
  ctx.beginPath();
  ctx.moveTo(0.5, 200);
  ctx.lineTo(50, 200)
  for(var x = 9; x < 117; x++) {
    ctx.lineTo(x * 6, (Math.random() * 10 -5) * 20 + 200)
  }
  ctx.lineTo(700, 200) 
  ctx.lineTo(750, 200) 
  ctx.stroke();
  ctx.closePath();
}

最后一起调用这些函数：

 (function draw(){
     var c_canvas = document.getElementById("ecg");
     drawSmallGrid(c_canvas);
     drawMediumGrid(c_canvas)
     drawBigGrid(c_canvas);
     drawLine(c_canvas);
     return;
  })();

神奇的心电图就这样出来了