Canvas繪製網格（心電圖，座標紙等可用）

時間 2019-12-07

標籤 canvas 繪製網格心電圖座標可用简体版

原文原文鏈接

---恢復內容開始---css

本篇文檔是Canvas繪製心電圖的第一個部分，想了解詳情的能夠關注後學習交流。html

心電圖的最底層須要一個網狀底層，來方便進行數據的測量。jquery

爲了大多數網友考慮，先繪製比較複雜的一種，再繪製我以前心電圖文檔同款canvas

1、白底分大、中、小三個區域的網格函數

展現：學習

一、首先是HTML部分ui

 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畫布，而且定義畫布大小。spa

二、使用JS繪製網格code

2.1定義所需變量名htm

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();

2、更改網格樣式（以前文檔心電圖樣式）

我以前文檔內的心電圖同款網格只須要將小型網格和大型網格函數刪除，而且在總函數內，刪除對這兩個函數的調用便可。

同時，將網格的顏色改變，便可實現我以前文檔中的心電圖同款網格。這裏只告訴你們方法，理解了便能畫出來了。

在這裏給你們上一段CSS代碼，來修改一些細節樣式

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

經過這段代碼，能夠將網格的外邊距取消，而且將網格的背景顏色改爲黑色(或者其餘顏色本身喜歡就好)，經過這種改變DIV的背景顏色實現對網格添加背景顏色的方法，有利於咱們以後在心電圖操做中「顯示/隱藏」網格的操做選項。

下一節爲你們帶來心電圖的波紋如何繪製。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。