Canvas繪制網格（心電圖，坐標紙等可用）
阿新 • • 發佈：2019-03-19
調用 all 邊距 info 文檔 meta 編寫 網格 三種
---恢復內容開始---
本篇文檔是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的背景顏色實現對網格添加背景顏色的方法，有利於我們之後在心電圖操作中“顯示/隱藏”網格的操作選項。
下一節為大家帶來心電圖的波紋如何繪制。
Canvas繪制網格（心電圖，坐標紙等可用）