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隐藏等方式实现。

具体如何实现，喜欢用什么样的方法实现，自己开心就好，这里只是我的一种实现方法。

之后的功能，大家可以关注我后续的文档。