Canvas繪製心電圖——改變波幅（JS按鈕改變Canvas圖片大小）

想了解心電圖繪製過程的同窗能夠查看原先的技術文檔，

單純想了解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 (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(); //重繪

}