在Javascript中获取线坐标答案

【问题标题】：Get Line co-ordinates in Javascript在Javascript中获取线坐标
【发布时间】：2011-07-13 08:09:34
【问题描述】：

我正在使用 Canvas (HTML 5) 绘制线条，因为线条/形状不作为对象存储在 Canvas 中，所以我无法将唯一事件附加到它（例如 onmouseclick）

我希望将 onmouseover 事件附加到一行，是否可以通过使用 JavaScript 在 Canvas 中了解鼠标是否在特定行（使用其 2 X 和 2 Y 坐标）上。这是否适用于不同的线宽（例如：2,5 像素）

希望避免使用 SVG，因为整个项目都是基于 Canvas 构建的

请指教。

【问题讨论】：

【解决方案1】：

您需要使用数学公式来计算线的面积以及某个点是否与其相交。

这是一个基本的例子：

【讨论】：

【解决方案2】：

有一个函数isPointInPath(x,y)。如果一个点在当前路径上，它将返回 true。您必须为要检查的每条线调用它，而最好的方法是在绘制的同时进行。

【讨论】：

【解决方案3】：

最好的方法是使用一些画布框架。看“LibCanvas :: Creating Lines”（别忘了在画布上点击）

【讨论】：