Canvas繪製心電圖——range控制時間軸（range改變Canvas拖動即刻觸發）

本篇技術文檔緊接上文內容，是經過range改變心電圖的時間軸，完整代碼能夠查看訂閱我以前的文檔。

同理該技術等於經過range控制Canvas的位置或者大小，不用鬆手，不用點擊肯定按鈕，單純拖動就能即時改變，讀懂該篇文檔即能理解，

實現方法不惟一，這裏只展現我用到的方法。

首先考慮完美因素，咱們在HTML頁面上加一個時間顯示標籤，讓range在拖動的時候，就能顯示時間，代碼以下：

1 時間：<input type="range" id="timeRange" min="0" max="10" value="0" step="1"/>
2 <span id="time">0</span> 秒

這樣就能夠即時輸出數字到span標籤內

以後建立一個初始時間變量：

1 var range = 0; //定義初始時間

建立完成以後，開始編寫觸發鼠標事件的根據range拖動隨機產生變化的函數事件

 1 //range改變心電圖顯示時間段
 2 $(function() {
 3   $("#timeRange").on("mouseover", function() {
 4     var $context = $(this);
 5     if ($context.data("event")) return;
 6     $context.data("event", "bindChange");
 7 
 8     $context.one("mousedown", function() {
 9       $(document).on("mousemove", function() {
10         //range改變回調
11         range = document.getElementById("timeRange").value;
12         hide();
13         draw();
14         //每次鼠標移動的時候，監聽值以後，重畫canvas內容
15         document.getElementById("time").innerHTML = range;
16         //將拖動後的值寫入span標籤
17       });
18     });
19   });
20 });

以後將range的值，加在要發生變化的座標上便可

 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] + range * -30, a[1] * mulNum + 80);
11     // 橫座標+時間單位x像素，縱座標x增益+橫軸位置
12   });
13   /**for循環 */
14   hb.stroke();
15   hb.closePath();
16 }

-30是爲了每次反方向移動30像素，即滾動條往左，圖往右。

完整代碼能夠關注我前幾篇文檔。