Canvas绘制心电图——画线测量距离（Canvas鼠标点击画线+标签跟随鼠标移动）

本篇文档记录绘制心电图之后，通过鼠标点击，绘制出一条线，同时鼠标旁边浮动出来字符长度。

想了解心电图的同学可以查看我之前的技术文档，里面有完整的代码，

但看此篇文档看懂之后可以理解如何通过鼠标点击拖拽就能画出图形，以及如何让标签跟着鼠标移动。

首先，我们在HTML页新建一个canvas标签画布。大小与之前的心电图相同，并且给出一个标签，该标签设置跟着鼠标移动。

1 <div>
2 <canvas id="celiang" width="750px" height="750px"></canvas>
3 </div>
4 <span id="mouseTip"></span>

然后需要考虑到，我们心电图所要用到的线条，在鼠标按下的时候开始绘制、鼠标移动既是路径，鼠标释放时候，所画的线条和记录距离的标签都应该消失。

故需要加一条css语句，来实现初期隐藏画线以及对span做block显示以及隐藏

 1 .heartBeat {
 2   width: 750px;
 3   height: 750px;
 4   background: black;
 5 }
 6 
 7 #celiang {
 8   position: fixed;
 9   top: 20px;
10   z-index: 5;
11   display: none;
12 }
13 
14 #mouseTip {
15   background: red;
16   display: none;
17   position: absolute;
18   pointer-events: none;
19 }

CSS设置完成之后，开始编辑JS，这里代码我给出画线和标签跟着鼠标移动的，利用注释划分

 1 //根据网格单位测量心电图相关距离
 2 var canvas = document.getElementById("celiang"); // 得到画布
 3 var cl = canvas.getContext("2d"); // 得到画布的上下文对象
 4 var flag = false;
 5 var x = 0; // 鼠标开始移动的位置X
 6 var y = 0; // 鼠标开始移动的位置Y
 7 var url = ""; // canvas图片的二进制格式转为dataURL格式
 8 /* 为canvas绑定mouse事件 */
 9 
10 $("canvas")
11   .mousedown(function(e) {
12     flag = true;
13     x = e.offsetX; // 鼠标落下时的X
14     y = e.offsetY; // 鼠标落下时的Y
15     // console.log(x, y);
16 
17     $("#mouseTip").css("display", "block");
18     $("#celiang").css("display", "block");
19     //当点击鼠标，让该canvas和span标签出现
20   })
21   .mouseup(function(e) {
22     flag = false;
23     url = $("#celiang")[0].toDataURL();
24     // 每次 mouseup 都保存一次画布状态
25     cl.clearRect(0, 0, canvas.width, canvas.height);
26     $("#mouseTip").css("display", "none");
27     $("#celiang").css("display", "none");
28     //当松开鼠标，让该canvas和sapn标签消失
29   })
30   .mousemove(function(e) {
31     drawrule(e); // 绘制方法+
32   });
33 function drawPencil(e) {
34   if (flag) {
35     cl.lineTo(e.offsetX, e.offsetY);
36     cl.stroke();
37     // 调用绘制方法
38   } else {
39     cl.beginPath();
40     cl.moveTo(x, y);
41   }
42 }
43 function drawrule(e) {
44   if (flag) {
45     cl.clearRect(0, 0, canvas.width, canvas.height);
46     cl.beginPath();
47     cl.strokeStyle = "#f00";
48     cl.moveTo(x, y);
49     cl.lineTo(e.offsetX, e.offsetY);
50     cl.stroke();
51     var xline = e.offsetX - x;
52     var yline = e.offsetY - y;
53     //定义两个变量来记录横纵坐标的点击点和拖动至的点的距离
54     var print;
55     //定义变量记录输出值
56     // console.log(xline + "X");
57     // console.log(yline + "Y");
58     if (xline > -yline) {
59       //判断横向距和纵向距离大小区别，发生变化时给出不同的单位
60       xline *= 200 / 15;
61       print = xline + "ms";
62     } else {
63       yline *= 0.5 / 15;
64       print = yline + "mv";
65     }
66     document.getElementById("mouseTip").innerHTML = print;
67   } //横向15px=200ms,纵向15px=0.5mv
68 }
69 
70 //标签跟着鼠标移动
71 document.onmousemove = function(ev) {
72   var oEvent = ev || event;
73   var oDiv = document.getElementById("mouseTip");
74   oDiv.style.left = oEvent.clientX + 10 + "px";
75   oDiv.style.top = oEvent.clientY - 20 + "px";
76   //距离鼠标的位置，
77 };

到此，完成设置利用鼠标绘制一条直线到canvas画布，并且旁边带有跟动鼠标移动的标签。

如果小伙伴们想了解完整的心电图代码，可以关注订阅我之前的文档进行学习

实现方法不唯一，这里只是给出我的一个比较奇葩的方法，希望在部分方面可以帮助到大家！

心电图项目到此完毕！！

标签：Canvas,鼠标,cl,标签,画线,canvas,心电图,var
来源： https://www.cnblogs.com/BLackPeace/p/10564371.html