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 }