获取画布中两点之间的距离

javascript canvas

2022-08-30 04:39:16

我有画布绘图选项卡，并希望线宽基于两个最后一个鼠标移动坐标更新之间的距离。我会自己翻译距离到宽度，我只需要知道如何获得这些点之间的距离（我已经有了这些点的坐标）。

答案 1

你可以用毕达哥拉斯定理来做

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

enter image description here

var a = x1 - x2;
var b = y1 - y2;

var c = Math.sqrt( a*a + b*b );

// c is the distance

答案 2

请注意，这是ES2015标准的一部分。MDN文档中也有一个很好的polyfill用于此功能。Math.hypot

因此，获得距离变得像.Math.hypot(x2-x1, y2-y1)