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

緊接上一篇文檔，咱們繼續來爲繪製好的心電圖添加功能。

首先添加功能，必須得有功能按鈕，因此咱們須要先修改HTML頁面內容，增長及功能按鈕

1、HTML頁面

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

（總體的HTML你們能夠查看我以前發的教程文檔）

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

插入後刷新網頁、獲得結果：

2、網格開關JS代碼

首先爲了方便操做，改變一行代碼位置

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

將這句代碼從方法函數內取出來，放在最外面，由於咱們以後的函數可能會須要調用c_canvas變量。

---

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

1 function hide() {
2   ctx.beginPath();
3   ctx.clearRect(0, 0, 1000, 1000);
4   ctx.stroke();
5 }

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

---

編寫好這段內容以後，咱們須要作的就是寫一個判斷條件，來完成對畫布的隱藏和顯示

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

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

以後寫判斷語句：

 1 //網格顯示隱藏功能
 2 function showGrid() {
 3   show = !show; //每次執行這個方法，show就會變一次
 4   if (show) {
 5     draw();//重畫所有
 6     document.getElementById("showGrid").innerHTML = "網格(開)";
 7     //改變button按鈕上的文字
 8   } else {
 9     hide();//清除畫布
10     drawLine(c_canvas);//將心電圖再畫上去，網格不畫
11     document.getElementById("showGrid").innerHTML = "網格(關)";
12     //改變button按鈕上的文字
13   }
14 }

到這裏所有的代碼就完成了，至於以前的心電圖是如何畫成的，你們能夠關注我以前的幾篇文檔。

固然隱藏網格的方式不止這一種，還能夠經過多一個canvas標籤利用css隱藏等方式實現。

具體如何實現，喜歡用什麼樣的方法實現，本身開心就好，這裏只是個人一種實現方法。

以後的功能，你們能夠關注我後續的文檔。