Canvas繪制心電圖——網格開關(Canvas顯示隱藏)

緊接上一篇文檔，我們繼續來為繪制好的心電圖添加功能。

首先添加功能，必須得有功能按鈕，所以我們需要先修改HTML頁面內容，增加及功能按鈕

一、HTML頁面

<button id="showGrid" onclick="showGrid()">網格(開)</button>
<button id="multiple" onclick="multiple()">增益(10)</button>
時間：<input type="range" id="timeRange" min="0" max="10" value="0" step="1" />

（整體的HTML大家可以查看我之前發的教程文檔）

我們在原有的心電圖DIV盒子外面插入這幾個按鈕，為了方便起見，我直接講我們用到的幾個更能全部插入HTML內，在之后的教程中將不會再有HTML的相關代碼。

插入后刷新網頁、得到結果：

二、網格開關JS代碼

首先為了方便操作，改變一行代碼位置

var c_canvas = document.getElementById("heartBeat");

將這句代碼從方法函數內取出來，放在最外面，因為我們之后的函數可能會需要調用c_canvas變量。

---

接下來首先需要一段隱藏函數：

function hide() {
  ctx.beginPath();
  ctx.clearRect(0, 0, 1000, 1000);
  ctx.stroke();
}

這一段函數實際上是將canvas的畫布內容上的內容清空。

---

編寫好這段內容之后，我們需要做的就是寫一個判斷條件，來完成對畫布的隱藏和顯示

首先需要定義一個全局變量：

var show = true; //定義網格顯示隱藏變量

之后寫判斷語句：

//網格顯示隱藏功能
function showGrid() {
  show = !show; //每次執行這個方法，show就會變一次
  if (show) {
    draw();//重畫全部
    document.getElementById("showGrid").innerHTML = "網格(開)";
    //改變button按鈕上的文字
  } else {
    hide();//清除畫布
    drawLine(c_canvas);//將心電圖再畫上去，網格不畫
    document.getElementById("showGrid").innerHTML = "網格(關)";
    //改變button按鈕上的文字
  }
}

到這里全部的代碼就完成了，至於之前的心電圖是如何畫成的，大家可以關注我之前的幾篇文檔。

當然隱藏網格的方式不止這一種，還可以通過多一個canvas標簽利用css隱藏等方式實現。

具體如何實現，喜歡用什么樣的方法實現，自己開心就好，這里只是我的一種實現方法。

之后的功能，大家可以關注我后續的文檔。