Canvas绘制心电图（静态）

时间 2019-12-12

原文原文链接

今天来继续绘制心电图css

首先一样为了广大博友，绘制一张静态心电图，在以后的教程文档中，会教你们如何对心电图附加功能。html

首先心电图基于我上一篇文档中网格绘制的基础上，绘制网格的具体原理你们能够查阅个人上一篇文档，在这里只给出代码，不作解释，重点放在新店图上。jquery

1、HTML页面代码canvas

 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>

2、绘制网格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();

3、绘制网格CSS样式代码：浏览器

 1 * {
 2   padding: 0;
 3   margin: 0;
 4 }
 5 
 6 .heartBeat {
 7   width: 750px;
 8   height: 750px;
 9   background: black;
10 }

4、绘制心电图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坐标，一正一负，则能够上下波动ui

至于有人会问，为何要给静态数据，随机生成的随机数行不行？spa

答案是能够的，这里给静态数据，是为了在以后添加功能的时候，心电图的样子不会一直变换。另外，未来在真实环境下对接数据的时候，也能真实的对接。

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(); //调用绘制网格

完成以后，可去浏览器查看效果：

静态心电图绘制完成，接下来的就是功能的实现，咱们放在以后的文档当中介绍，至于功能的实现，有：网格开关，心电波动增益，时间轴的拖动以及鼠标点击便可测量响应数据。感兴趣的博友能够继续关注后续文档。