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

要确定点击事件发生在哪条线上，可以使用以下步骤：

在画布上绘制所有的线条。
在点击事件的处理程序中，获取鼠标点击的坐标。
遍历所有的线条，对于每条线条，使用数学方法来判断点击点是否在线条上。
- 如果线条是水平线，则判断点击点的 y 坐标是否在线条的 y 范围内。
- 如果线条是垂直线，则判断点击点的 x 坐标是否在线条的 x 范围内。
- 如果线条是斜线，则判断点击点与线条的斜率和截距是否满足一定的条件。
如果点击点在某条线上，则标记该线条。
在画布上重新绘制所有的线条，并将标记的线条用不同的颜色或样式绘制出来。

以下是一个简单的示例代码：

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// 定义线条的数据结构
const lines = [
  { x1: 50, y1: 50, x2: 250, y2: 50 }, // 水平线
  { x1: 100, y1: 100, x2: 100, y2: 200 }, // 垂直线
  { x1: 150, y1: 150, x2: 350, y2: 250 }, // 斜线
];

let selectedLine = null; // 选中的线条

// 绘制所有线条
function drawLines() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.strokeStyle = "#000";
  ctx.lineWidth = 2;
  
  lines.forEach(line => {
    ctx.beginPath();
    ctx.moveTo(line.x1, line.y1);
    ctx.lineTo(line.x2, line.y2);
    ctx.stroke();
  });
  
  // 绘制选中的线条
  if (selectedLine) {
    ctx.strokeStyle = "#f00";
    ctx.lineWidth = 4;
    ctx.beginPath();
    ctx.moveTo(selectedLine.x1, selectedLine.y1);
    ctx.lineTo(selectedLine.x2, selectedLine.y2);
    ctx.stroke();
  }
}

// 判断点击点是否在线条上
function isPointOnLine(line, x, y) {
  if (line.y1 === line.y2) { // 水平线
    return y >= line.y1 - 2 && y <= line.y1 + 2;
  } else if (line.x1 === line.x2) { // 垂直线
    return x >= line.x1 - 2 && x <= line.x1 + 2;
  } else { // 斜线
    const k = (line.y2 - line.y1) / (line.x2 - line.x1); // 斜率
    const b = line.y1 - k * line.x1; // 截距
    return Math.abs(y - (k * x + b)) <= 2;
  }
}

// 处理点击事件
canvas.addEventListener("click", function(e) {
  const rect = canvas.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;
  
  selectedLine = null;
  lines.forEach(line => {
    if (isPointOnLine(line, x, y)) {
      selectedLine = line;
    }
  });
  
  drawLines();
});

drawLines();

在这个示例中，我们首先定义了三条线条的数据结构，然后使用 drawLines 函数绘制所有的线条。在点击事件的处理程序中，我们获取点击点的坐标，并遍历所有的线条，使用 isPointOnLine 函数来判断点击点是否在某条线上。如果是，则将该线条标记为选中，并重新绘制所有的线条。

你可以根据实际需求对代码进行修改和扩展