获取canvas中两点之间的距离

我有canvas绘制选项卡，并希望lineWidth基于最后两个mousemove坐标更新之间的距离。 我将自己的距离的距离，我只需要知道如何获得这些点之间的距离（我已经有这些pointes的坐标）。

Answer 1

你可以用毕达哥拉斯定理来做到这一点

如果你有两个点（x1，y1）和（x2，y2），那么你可以计算x和y的差值，我们称它们为a和b。

var a = x1 - x2 var b = y1 - y2 var c = Math.sqrt( a*a + b*b ); // c is the distance 

Answer 2

请注意， Math.hypot是ES2015标准的一部分。 这个function在MDN文档上也有很好的填充。

所以得到距离就像Math.hypot(x2-x1, y2-y1) 。

Answer 3

http://en.wikipedia.org/wiki/Euclidean_distance

如果你有坐标，使用公式来计算距离：

 var dist = Math.sqrt( Math.pow((x1-x2), 2) + Math.pow((y1-y2), 2) ); 

Answer 4

我倾向于使用这个计算很多东西，所以我喜欢把它添加到Math对象：

 Math.dist=function(x1,y1,x2,y2){ if(!x2) x2=0; if(!y2) y2=0; return Math.sqrt((x2-x1)*(x2-x1)+(y2-y1)*(y2-y1)); } Math.dist(0,0, 3,4); //the output will be 5 Math.dist(1,1, 4,5); //the output will be 5 Math.dist(3,4); //the output will be 5 

更新：

这种方法是特别高兴，当你最终在类似的情况下（我经常这样做）：

 varName.dist=Math.sqrt( ( (varName.paramX-varX)/2-cx )*( (varName.paramX-varX)/2-cx ) + ( (varName.paramY-varY)/2-cy )*( (varName.paramY-varY)/2-cy ) ); 

那可怕的事情变得更容易pipe理：

 varName.dist=Math.dist((varName.paramX-varX)/2, (varName.paramY-varY)/2, cx, cy); 

Answer 5

两个坐标x和y之间的距离！ x1和y1是第一个点/位置，x2和y2是第二个点/位置！

 function diff (num1, num2) { if (num1 > num2) { return (num1 - num2); } else { return (num2 - num1); } }; function dist (x1, y1, x2, y2) { var deltaX = diff(x1, x2); var deltaY = diff(y1, y2); var dist = Math.sqrt(Math.pow(deltaX, 2) + Math.pow(deltaY, 2)); return (dist); };