标签：技术 bsp var 插入 clear 代码 取出 全局变量 一个
紧接上一篇文档，我们继续来为绘制好的心电图添加功能。
首先添加功能，必须得有功能按钮，所以我们需要先修改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隐藏等方式实现。
具体如何实现，喜欢用什么样的方法实现，自己开心就好，这里只是我的一种实现方法。
之后的功能，大家可以关注我后续的文档。
标签：技术 bsp var 插入 clear 代码 取出 全局变量 一个
原文地址：https://www.cnblogs.com/BLackPeace/p/10558721.html
