javafx 心电图 js绘制心电图

利用JS绘制Canvas心电图，并且通过JS能够改变心电图的增幅。普通朋友可以通过该篇文档学会JS按钮控制增大或者缩小图片。

想了解心电图绘制过程的同学可以查看原先的技术文档，

单纯想了解JS放大缩小功能的，认真读懂此片文档。

写法很多，不唯一，在这里只举我的例子。

首先我们需要在原有的变量定义基础上增加两个变量：

 

之后开始写JS方法：

1 var mulNum = 1; //定义增益变量
2 var i = 1; //定义判断值变量

之后写增益变化方法（即JS编写放大缩小的判断）：

//心电图波纹增益
function multiple() {
  if (i == 4) {
    i = 1;
  }
  i++;
  switch (i) {
    case 2:
      mulNum = 2;
      document.getElementById("multiple").innerHTML = "增益(20)";
      break;
    case 3:
      mulNum = 0.5;
      document.getElementById("multiple").innerHTML = "增益(5)";
      break;
    case 4:
      mulNum = 1;
      document.getElementById("multiple").innerHTML = "增益(10)";
      break;
  }
  hide();//清除
  draw();//重绘
}

这里的i要定义在外面，不然每次执行这个函数，都会重新加载一遍i=1,写在外面就不会发生这样的情况。

之后我们还需要在每次变化之后，将按钮原有的值做一个变化。所以利用inner。

之后我们将mulNum的值乘一下想要改变原来图形的坐标就可以了，在这里我是对心电图的Y轴的值做一个改变所以在Y轴乘mulNum即可：

1 /**绘制心电图 */
 2 function drawLine(c_canvas) {
 3   hb = c_canvas.getContext("2d");
 4   hb.strokeStyle = "#0f0";
 5   //线条颜色为绿色
 6   hb.strokeWidth = 2;
 7   //线条粗细为2
 8   hb.beginPath();
 9   beatArray.forEach(a => {
10     hb.lineTo(a[0], a[1] * mulNum + 80);
11   });
12   /**for循环 */
13   hb.stroke();
14   hb.closePath();
15 }

就像文章开头提到的，想要实现任何功能的方法不唯一，我这只是提供一种我个人的思路，希望有大佬能有更简便易懂的方法互相交流讨论。

想了解心电图的朋友、或者只对这样几句代码不好理解的，可以关注我之前的几篇文档，把之前几篇文档合起来就是一篇完整的代码供参考。

//心电图波纹增益
function multiple() {
if (i == 4) {
i = 1;
}
i++;
switch
case 2:
mulNum = 2;
document.getElementById("multiple").innerHTML = "增益(20)";
break;
case 3:
mulNum = 0.5;
document.getElementById("multiple").innerHTML = "增益(5)";
break;
case 4:
mulNum = 1;
document.getElementById("multiple").innerHTML = "增益(10)";
break;
}
hide();//清除
draw();//重绘
}