JavaScript Canvas 点击事件检测点是否在线上

要实现此功能，您需要使用以下步骤：\n\n1. 获取鼠标点击事件的坐标。\n2. 遍历在线的点集合，检查每个点是否与鼠标点击位置相匹配。\n3. 如果找到匹配的点，则表示该点在线上；否则，表示该点不在线上。\n\n以下是实现此功能的示例代码：\n\njavascript\n// 在线点的集合\nlet points = [\n { x: 100, y: 100 },\n { x: 200, y: 200 },\n { x: 300, y: 300 },\n];\n\n// 获取 canvas 元素\nlet canvas = document.getElementById("myCanvas");\nlet ctx = canvas.getContext("2d");\n\n// 监听鼠标点击事件\ncanvas.addEventListener("click", function (event) {\n // 获取鼠标点击位置的坐标\n let mouseX = event.pageX - canvas.offsetLeft;\n let mouseY = event.pageY - canvas.offsetTop;\n\n // 遍历在线的点集合，检查每个点是否与鼠标点击位置相匹配\n for (let i = 0; i < points.length; i++) {\n let point = points[i];\n\n // 检查点击位置是否在点的范围内\n if (\n mouseX >= point.x - 5 &&\n mouseX <= point.x + 5 &&\n mouseY >= point.y - 5 &&\n mouseY <= point.y + 5\n ) {\n console.log("该点在线上");\n return;\n }\n }\n\n console.log("该点不在线上");\n});\n\n\n在此示例中，我们首先定义了一个包含在线点的集合 points。然后，我们获取了 canvas 元素和绘图上下文 ctx。接下来，我们监听了鼠标点击事件，并在事件处理程序中获取了鼠标点击位置的坐标。然后，我们遍历在线点的集合，检查每个点是否与鼠标点击位置相匹配。如果找到匹配的点，则表示该点在线上；否则，表示该点不在线上。最后，我们使用 console.log 输出结果。