单击（确定起点）—> 鼠标移动（实时绘制起点位置到鼠标光标位置直线） —>再次单击（确定距离）
具体实现<!doctype html><html><head> <meta http-equiv="content-type" content="text/html; charset=gb2312" /> <title>两点之间画折线</title> <style type="text/css"> body{ font-size:12px; } </style></head><body><p style="width: 900px;height: 600px; margin: 20px auto;"> <canvas id="mycanvas" width="900" height="600" style="border:1px solid #eef;"> your browser does not support the html5 canvas tag. </canvas></p><script> var startx = "",starty = ""; // 记录起始位置 var c=document.getelementbyid("mycanvas"); var ctx=c.getcontext("2d"); c.onclick = function(e){ if(startx == "" && starty == ""){ // 当鼠标第一次单击时，记录起始位置 createbox(e,"tip1"); startx = e.offsetx; starty = e.offsety; }else{ // 当第二次单击鼠标时，绘制直线 drawline(e) createbox(e,"tip2"); startx = ""; starty = ""; } }; c.onmousemove = function(e){ // 已经有起始位置后，移动鼠标时，绘制起始位置到鼠标光标位置的直线 if(startx != "" && starty != ""){ ctx.globalcompositeoperation="copy"; // 使鼠标每次移动时重新绘制的直线覆盖掉上一次绘制的直线 drawline(e) } }; function drawline(e){ ctx.beginpath(); ctx.moveto(startx,starty); ctx.strokestyle="#0000ff"; ctx.linewidth=2; ctx.lineto(e.offsetx,e.offsety); ctx.stroke(); ctx.closepath(); } function createbox(e,id){ // 画坐标提示框 var myp = document.createelement("p"); myp.setattribute("id",id); myp.style.position="absolute"; myp.style.lineheight="20px"; myp.style.borderstyle="solid"; myp.style.bordercolor="#aaf"; myp.style.color="#aaf"; myp.style.borderwidth="1px"; myp.style.height="20px"; myp.style.padding="6px"; myp.style.display="none"; document.body.appendchild(myp); var myhint = document.getelementbyid(id); myhint.style.display= "block"; myhint.style.left= (e.clientx+4)+"px"; myhint.style.top= (e.clienty+4)+"px"; myhint.innerhtml= id+" x坐标："+e.clientx+"，y坐标： "+e.clienty; }</script></body></html>
以上就是实现测距的方法的详细内容。