---恢複内容開始---
本篇文檔是Canvas繪制心電圖的第一個部分，想了解詳情的可以關注後學習交流。
心電圖的最底層需要一個網狀底層，來友善進行資料的測量。
為了大多數網友考慮，先繪制比較複雜的一種，再繪制我之前心電圖文檔同款
一、白底分大、中、小三個區域的網格
展示：
1、首先是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
8 <script src="js/jquery-3.2.1.min.js"></script>
9 <!-- 引入JQuery檔案（學習心電圖的同學會用到，單純學習網格不需要引入JQ檔案） -->
10 <link rel="stylesheet" href="style/index.css" />
11 <!-- 引入樣式檔案 -->
12 <title>網格</title>
13 </head>
14 <body>
15 <div class="grids">
16 <canvas id="grids" width="750px" height="750px"></canvas>
17 </div>
18 <script src="js/index.js"></script>
19 <!-- 引入自己建立JS檔案,為了完全保證程式正常運作，該段引入放在canvas後 -->
20 </body>
21 </html> HTML建立Canvas畫布，并且定義畫布大小。
2、使用JS繪制網格
2.1定義所需變量名
1 var ctx; 2.2編寫網格繪制總函數
所需要的進階網格需要三種大小的網格，分别為大、中、小，這三種網格需要被同時調用執行，故專寫一個函數來共同調用三種大小的繪制函數。
1 /**繪制網格總函數
2 * 分别繪制
3 * drawSmallGrid小網格
4 * drawMediumGrid中網格
5 * drawBigGrid大網格
6 */
7 function drawgrid() {
8 var c_canvas = document.getElementById("grids");
9 drawSmallGrid(c_canvas);
10 drawMediumGrid(c_canvas);
11 drawBigGrid(c_canvas);
12 return;
13 } 2.3編寫小網格函數
衆所周知，兩點一線的道理canvas也受用，但是為了友善起見，網格類型的依靠循環來寫，具體代碼如下：
1 /**繪制小網格
2 * 第一個for語句循環出縱向小方格細線條，間距為X軸方向3像素
3 * 第二個for語句循環出橫向小方格細線條，間距為Y軸方向3像素
4 */
5 function drawSmallGrid(c_canvas) {
6 ctx = c_canvas.getContext("2d");
7 ctx.strokeStyle = "#f1dedf";
8 ctx.strokeWidth = 1;
9 ctx.beginPath();
10 for (var x = 0.5; x < 750; x += 3) {
11 ctx.moveTo(x, 0);
12 ctx.lineTo(x, 750);
13 ctx.stroke();
14 }
15 for (var y = 0.5; y < 750; y += 3) {
16 ctx.moveTo(0, y);
17 ctx.lineTo(750, y);
18 ctx.stroke();
19 }
20 ctx.closePath();
21 return;
22 } 2.4編寫中網格函數
根據小網格，同理可繪制中型網格
1 /**繪制中型網格
2 * 第一個for語句循環出縱向中方格中線條，間距為X軸方向15像素，小網格的5倍
3 * 第二個for語句循環出橫向中方格中線條，間距為Y軸方向15像素，小網格的5倍
4 */
5 function drawMediumGrid(c_canvas){
6 ctx = c_canvas.getContext("2d");
7 ctx.strokeStyle="#fdbeb9";
8 ctx.strokeWidth = 2
9 //寬度是小網格的2倍
10 ctx.beginPath();
11 for(var x=0.5;x<750;x+=15){
12 ctx.moveTo(x,0);
13 ctx.lineTo(x,750);
14 ctx.stroke();
15 }
16 for(var y=0.5;y<750;y+=15){
17 ctx.moveTo(0,y);
18 ctx.lineTo(750,y);
19 ctx.stroke();
20 }
21 ctx.closePath();
22 return;
23 } 2.5編寫大型網格
道理同中型網格
1 /**繪制大型網格
2 * 第一個for語句循環出縱向大方格中線條，間距為X軸方向75像素，小網格的5倍
3 * 第二個for語句循環出橫向大方格中線條，間距為Y軸方向75像素，小網格的5倍
4 */
5 function drawBigGrid(c_canvas) {
6 ctx = c_canvas.getContext("2d");
7 ctx.strokeStyle = "#e0514b";
8 ctx.strokeWidth = 3;
9 ctx.beginPath();
10 for (var x = 0.5; x < 750; x += 75) {
11 ctx.moveTo(x, 0);
12 ctx.lineTo(x, 750);
13 ctx.stroke();
14 }
15 for (var y = 0.5; y < 750; y += 75) {
16 ctx.moveTo(0, y);
17 ctx.lineTo(750, y);
18 ctx.stroke();
19 }
20 ctx.closePath();
21 return;
22 } 至此，大中小三中網格繪制成功，接下來隻需要調用總函數，三中網格就能顯示在頁面上
2.6調用總函數
1 drawgrid(); 二、更改網格樣式（之前文檔心電圖樣式）
我之前文檔内的心電圖同款網格隻需要将小型網格和大型網格函數删除，并且在總函數内，删除對這兩個函數的調用即可。
同時，将網格的顔色改變，即可實作我之前文檔中的心電圖同款網格。這裡隻告訴大家方法，了解了便能畫出來了。
在這裡給大家上一段CSS代碼，來修改一些細節樣式
1 * {
2 padding: 0;
3 margin: 0;
4 }
5
6 .grids {
7 width: 750px;
8 height: 750px;
9 background: black;
10 } 通過這段代碼，可以将網格的外邊距取消，并且将網格的背景顔色改成黑色(或者其他顔色自己喜歡就好)，通過這種改變DIV的背景顔色實作對網格添加背景顔色的方法，有利于我們之後在心電圖操作中“顯示/隐藏”網格的操作選項。
下一節為大家帶來心電圖的波紋如何繪制。