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

要实现此功能，您需要使用以下步骤：

获取鼠标点击事件的坐标。
遍历在线的点集合，检查每个点是否与鼠标点击位置相匹配。
如果找到匹配的点，则表示该点在线上；否则，表示该点不在线上。

以下是实现此功能的示例代码：

// 在线点的集合
let points = [
  { x: 100, y: 100 },
  { x: 200, y: 200 },
  { x: 300, y: 300 },
];

// 获取 canvas 元素
let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");

// 监听鼠标点击事件
canvas.addEventListener("click", function (event) {
  // 获取鼠标点击位置的坐标
  let mouseX = event.pageX - canvas.offsetLeft;
  let mouseY = event.pageY - canvas.offsetTop;

  // 遍历在线的点集合，检查每个点是否与鼠标点击位置相匹配
  for (let i = 0; i < points.length; i++) {
    let point = points[i];

    // 检查点击位置是否在点的范围内
    if (
      mouseX >= point.x - 5 &&
      mouseX <= point.x + 5 &&
      mouseY >= point.y - 5 &&
      mouseY <= point.y + 5
    ) {
      console.log("该点在线上");
      return;
    }
  }

  console.log("该点不在线上");
});

在此示例中，我们首先定义了一个包含在线点的集合 points。然后，我们获取了 canvas 元素和绘图上下文 ctx。接下来，我们监听了鼠标点击事件，并在事件处理程序中获取了鼠标点击位置的坐标。然后，我们遍历在线点的集合，检查每个点是否与鼠标点击位置相匹配。如果找到匹配的点，则表示该点在线上；否则，表示该点不在线上。最后，我们使用 console.log 输出结果