紧接上一篇文档,我们继续来为绘制好的心电图添加功能。
首先添加功能,必须得有功能按钮,所以我们需要先修改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隐藏等方式实现。
具体如何实现,喜欢用什么样的方法实现,自己开心就好,这里只是我的一种实现方法。
之后的功能,大家可以关注我后续的文档。