Canvas绘制心电图——改变波幅（JS按钮改变Canvas图片大小）

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

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

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

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

 

之后开始写JS方法：

var mulNum = 1; //定义增益变量
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即可：

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

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

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

//心电图波纹增益

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();//重绘

}