Canvas之旅系列----(三): 读懂鼠标点击位置的玄机，解锁你的绘图梦想

踏上Canvas之旅：鼠标点击，描绘梦想

在Canvas的世界里，鼠标点击不仅是简单的动作，更是创造力和灵感的触点。通过鼠标，你可以自由地绘制线条、图形，甚至逼真的图像。但要实现这些，你需要先学会与Canvas建立联系，感知鼠标点击的位置。

第一步：初识canvas，开启绘图的画布

让我们从了解Canvas的属性和方法开始。Canvas是一个HTML元素，它提供了丰富的属性和方法，可以让你轻松地绘制图形、图像和文本。其中，getContext()方法是Canvas的灵魂，它允许你获取Canvas的上下文对象，让你可以使用Canvas的所有绘图功能。

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

第二步：赋予Canvas生命，绘制点阵，显露图形

有了Canvas的上下文对象，你就可以开始绘制图形了。一个最简单的图形就是点。你可以使用moveTo()方法将画笔移动到画布上的某个位置，然后使用lineTo()方法将画笔移到另一个位置，最后调用stroke()方法来绘制线段。

ctx.moveTo(100, 100);
ctx.lineTo(200, 200);
ctx.stroke();

第三步：捕捉鼠标点击，探索未知的边界

现在，让我们回到本文的重点——鼠标点击。要捕捉鼠标点击，你可以使用addEventListener()方法为Canvas添加一个"click"事件监听器。这个监听器会在每次用户点击Canvas时触发一个事件处理函数。在事件处理函数中，你可以读取鼠标相对于Canvas的位置，并使用这个信息来判断鼠标点击了哪个点。

canvas.addEventListener("click", function(e) {
  let mouseX = e.clientX - canvas.offsetLeft;
  let mouseY = e.clientY - canvas.offsetTop;

  // 扫描绘制的点的位置，判断鼠标点击了哪个点
  for (let i = 0; i < points.length; i++) {
    let point = points[i];
    let distance = Math.sqrt((mouseX - point.x) ** 2 + (mouseY - point.y) **  2);
    if (distance < 10) {
      // 鼠标点击了某个点，执行相应的操作
      console.log("你点击了第", i + 1, "个点");
    }
  }
});

结语：鼠标点击，点亮创意的星空

通过本文，你已经掌握了如何在Canvas中读取鼠标点击的位置，并根据这个信息来执行相应的操作。这只是Canvas之旅的第三站，还有更多的精彩等你探索。只要你继续前进，不断学习，终有一天，你将成为一位独当一面的Canvas大师，用你的画笔描绘出梦想的星空！