Canvas绘制心电图——网格开关

Posted 2021-02-13 blackpeace

紧接上一篇文档，我们继续来为绘制好的心电图添加功能。

首先添加功能，必须得有功能按钮，所以我们需要先修改html页面内容，增加及功能按钮

一、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的相关代码。

插入后刷新网页、得到结果：

二、网格开关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隐藏等方式实现。

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

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