今天來繼續繪制心電圖
首先同樣為了廣大博友，繪制一張靜態心電圖，在之后的教程文檔中，會教大家如何對心電圖附加功能。
首先心電圖基於我上一篇文檔中網格繪制的基礎上，繪制網格的具體原理大家可以查閱我的上一篇文檔，在這里只給出代碼，不做解釋，重點放在新店圖上。
一、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(); //調用繪制網格
完成之后，可去瀏覽器查看效果：
靜態心電圖繪制完成，接下來的就是功能的實現，我們放在之后的文檔當中介紹，至於功能的實現，有：網格開關，心電波動增益，時間軸的拖動以及鼠標點擊即可測量響應數據。感興趣的博友可以繼續關注后續文檔。