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

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

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

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

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

之后开始写JS方法：

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

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

1//心电图波纹增益
2function multiple() {
3  if (i == 4) {
4    i = 1;
5  }
6  i++;
7  switch (i) {
8    case 2:
9      mulNum = 2;
10      document.getElementById("multiple").innerHTML = "增益(20)";
11      break;
12    case 3:
13      mulNum = 0.5;
14      document.getElementById("multiple").innerHTML = "增益(5)";
15      break;
16    case 4:
17      mulNum = 1;
18      document.getElementById("multiple").innerHTML = "增益(10)";
19      break;
20  }
21  hide();//清除
22  draw();//重绘
23}

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

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

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

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

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

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

//心电图波纹增益

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

}