js canvas 多边形点击查找当前点击的是在那条线上

要在js canvas中找到点击的多边形的哪条边上，可以使用以下步骤：

1. 获取鼠标点击事件的坐标（x，y）。
2. 循环遍历多边形的每条边。
3. 对于每条边，使用线段与点的相交算法来检查鼠标点击的位置是否在该边上。
4. 如果点击位置在边上，则返回该边。

下面是一个示例代码：

// 获取canvas元素和上下文
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

// 定义多边形的顶点坐标
var vertices = [
  { x: 100, y: 100 },
  { x: 200, y: 100 },
  { x: 200, y: 200 },
  { x: 100, y: 200 }
];

// 绘制多边形
ctx.beginPath();
ctx.moveTo(vertices[0].x, vertices[0].y);
for (var i = 1; i < vertices.length; i++) {
  ctx.lineTo(vertices[i].x, vertices[i].y);
}
ctx.closePath();
ctx.stroke();

// 监听鼠标点击事件
canvas.addEventListener("click", function (event) {
  var rect = canvas.getBoundingClientRect();
  var mouseX = event.clientX - rect.left;
  var mouseY = event.clientY - rect.top;

  // 遍历多边形的每条边
  for (var i = 0; i < vertices.length; i++) {
    var currentVertex = vertices[i];
    var nextVertex = vertices[(i + 1) % vertices.length];

    // 检查点击位置是否在当前边上
    if (isPointOnLine(mouseX, mouseY, currentVertex.x, currentVertex.y, nextVertex.x, nextVertex.y)) {
      console.log("点击位置在多边形的第" + (i + 1) + "条边上");
      break;
    }
  }
});

// 线段与点的相交算法
function isPointOnLine(px, py, x1, y1, x2, y2) {
  var d1 = getDistance(px, py, x1, y1);
  var d2 = getDistance(px, py, x2, y2);
  var lineLength = getDistance(x1, y1, x2, y2);

  // 允许一定的误差范围
  var buffer = 0.1;

  return d1 + d2 >= lineLength - buffer && d1 + d2 <= lineLength + buffer;
}

// 计算两点之间的距离
function getDistance(x1, y1, x2, y2) {
  var dx = x2 - x1;
  var dy = y2 - y1;
  return Math.sqrt(dx * dx + dy * dy);
}

在上面的示例代码中，我们先绘制了一个四边形并监听了canvas的点击事件。当点击事件发生时，我们获取鼠标点击的坐标，并遍历多边形的每条边。然后使用线段与点的相交算法检查点击位置是否在当前边上，如果是，则打印出边的序号