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

具体如何实现，喜欢用什么样的方法实现，本身开心就好，这里只是个人一种实现方法。

以后的功能，你们能够关注我后续的文档。