今天来继续绘制心电图
首先同样为了广大博友，绘制一张静态心电图，在之后的教程文档中，会教大家如何对心电图附加功能。
首先心电图基于我上一篇文档中网格绘制的基础上，绘制网格的具体原理大家可以查阅我的上一篇文档，在这里只给出代码，不做解释，重点放在新店图上。
一、HTML页面代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge" /> 7 <script src="js/jquery-3.2.1.min.js"></script> 8 <!-- 引入JQuery文件（学习心电图的同学会用到，单纯学习网格不需要引入JQ文件） --> 9 <link rel="stylesheet" href="style/index.css" /> 10 <!-- 引入样式文件 --> 11 <title>心电图</title> 12 </head> 13 <body> 14 <div class="heartBeat"> 15 <canvas id="heartBeat" width="750px" height="750px"></canvas> 16 </div> 17 <script src="js/index.js"></script> 18 <!-- 引入自己新建JS文件,为了完全保证程序正常运行，该段引入放在canvas后 --> 19 </body> 20 </html>
二、绘制网格JS代码：
1 var ctx; 2 3 /**绘制中型网格 4 * 第一个for语句循环出纵向中方格中线条，间距为X轴方向15像素，小网格的5倍 5 * 第二个for语句循环出横向中方格中线条，间距为Y轴方向15像素，小网格的5倍 6 */ 7 function drawGrid(c_canvas) { 8 var c_canvas = document.getElementById("heartBeat"); 9 ctx = c_canvas.getContext("2d"); 10 ctx.strokeStyle = "#F00"; 11 ctx.strokeWidth = 2; 12 //宽度是小网格的2倍 13 ctx.beginPath(); 14 for (var x = 0.5; x < 750; x += 15) { 15 ctx.moveTo(x, 0); 16 ctx.lineTo(x, 750); 17 ctx.stroke(); 18 } 19 for (var y = 0.5; y < 750; y += 15) { 20 ctx.moveTo(0, y); 21 ctx.lineTo(750, y); 22 ctx.stroke(); 23 } 24 ctx.closePath(); 25 return; 26 } 27 28 drawGrid();
三、绘制网格CSS样式代码：
1 * { 2 padding: 0; 3 margin: 0; 4 } 5 6 .heartBeat { 7 width: 750px; 8 height: 750px; 9 background: black; 10 }
四、绘制心电图JS代码
4.1首先，我们需要定义一组心电图的波动数据，另外还需要定义一个画线变量。
1 var hb;//heartBeat简写，方便之后操作 2 var beatArray= [ 3 [0, -10], 4 [50, 30], 5 [70, -50], 6 [90, 50], 7 [110, -15], 8 [130, 25], 9 [150, -60], 10 [170, 15], 11 [190, -30], 12 [210, 32], 13 [230, -2], 14 [250, 25], 15 [270, -45], 16 [290, 32], 17 [310, -54], 18 [330, 25], 19 [350, -16], 20 [370, 30], 21 [390, -50], 22 [410, 50], 23 [430, -15], 24 [450, 25], 25 [470, -60], 26 [490, 15], 27 [510, -30], 28 [530, 32], 29 [550, -2], 30 [570, 25], 31 [590, -45], 32 [610, 32], 33 [630, -54], 34 [650, 25], 35 [670, -16], 36 [696, 30], 37 [710, -50], 38 [730, 50], 39 [750, -15], 40 [770, 25], 41 [790, -60], 42 [810, 15], 43 [830, -30], 44 [850, 32], 45 [870, -2], 46 [890, 25], 47 [910, -45], 48 [930, 32], 49 [950, -54], 50 [970, 25], 51 [990, -16], 52 [1010, 30], 53 [1030, -50], 54 [1050, 50], 55 [1070, -15], 56 [1090, 25], 57 [1110, -60], 58 [1130, 15], 59 [1150, -30], 60 [1170, 32], 61 [1190, -2], 62 [1210, 25], 63 [1230, -45], 64 [1250, 32], 65 [1270, -54], 66 [1290, 25], 67 [1310, -16] 68 ];
这一组数据为波动数据，接下来只需要给循环，将这组数据循环输出，即可得到我们想要的新店数据。每个一维数组中，第一位是X坐标，故慢慢增大，绘图方式从左向右移动，第二位数是Y坐标，一正一负，则可以上下波动
至于有人会问，为什么要给静态数据，随机生成的随机数行不行？
答案是可以的，这里给静态数据，是为了在之后添加功能的时候，心电图的样子不会一直变换。另外，将来在真实环境下对接数据的时候，也能真实的对接。
4.2绘制心电图代码
我们是将网格和心电图绘制在一张网格上面，所以为了方便起见，写一个总函数。
1 function draw() { 2 var c_canvas = document.getElementById("heartBeat"); 3 drawGrid(c_canvas); 4 drawLine(c_canvas); 5 return; 6 }
这段总函数，规定了画线的规则，以及当我们调用这个总函数时，可以同时将网格和心跳同时绘制。
接下来绘制心跳波动部分JS
1 /**绘制心电图 */ 2 function drawLine(c_canvas) { 3 hb = c_canvas.getContext("2d"); 4 hb.strokeStyle = "#0f0"; 5 //线条颜色为绿色 6 hb.strokeWidth = 2; 7 //线条粗细为2 8 hb.beginPath(); 9 beatArray.forEach(a => { 10 hb.lineTo(a[0], a[1] + 80); 11 }); 12 /**for循环 */ 13 hb.stroke(); 14 hb.closePath(); 15 }
这一段代码当中，使用for循环将之前我们给的数组，循环输出到hb.lineTo当中，故可以得到我们所需要的心跳波动图。
在for循环中的a[1]后面的+80，则是Y轴方向向下平移80，则80可以当最这条心电图的轴。
之后调用总控制绘图函数：
1 draw(); //调用绘制网格
完成之后，可去浏览器查看效果：
静态心电图绘制完成，接下来的就是功能的实现，我们放在之后的文档当中介绍，至于功能的实现，有：网格开关，心电波动增益，时间轴的拖动以及鼠标点击即可测量响应数据。感兴趣的博友可以继续关注后续文档。