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

// 生成随机点的数量
var numDots = 5;

// 存储随机点的数组
var dots = [];

// 生成随机点
for (var i = 0; i < numDots; i++) {
  var x = Math.random() * canvas.width;
  var y = Math.random() * canvas.height;
  dots.push({ x: x, y: y });
}

// 绘制随机点
for (var i = 0; i < dots.length; i++) {
  ctx.beginPath();
  ctx.arc(dots[i].x, dots[i].y, 5, 0, 2 * Math.PI);
  ctx.fill();
}

// 存储连接点的数组
var connectedDots = [];

// 监听canvas的点击事件
canvas.addEventListener("mousedown", function (event) {
  // 获取点击位置
  var mouseX = event.clientX - canvas.offsetLeft;
  var mouseY = event.clientY - canvas.offsetTop;

  // 查找最近的点
  var nearestDot = null;
  var nearestDistance = Infinity;
  for (var i = 0; i < dots.length; i++) {
    var distance = Math.sqrt(
      Math.pow(dots[i].x - mouseX, 2) + Math.pow(dots[i].y - mouseY, 2)
    );
    if (distance < nearestDistance) {
      nearestDot = dots[i];
      nearestDistance = distance;
    }
  }

  // 将点添加到连接数组中
  connectedDots.push(nearestDot);

  // 绘制连接线
  if (connectedDots.length > 1) {
    ctx.beginPath();
    ctx.moveTo(connectedDots[0].x, connectedDots[0].y);
    for (var i = 1; i < connectedDots.length; i++) {
      ctx.lineTo(connectedDots[i].x, connectedDots[i].y);
    }
    ctx.stroke();
  }
});