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像素，即滚动条往左，图往右。

完整代码能够关注我前几篇文档。