鼠标坐标不是数学与 js 中的画布坐标 - Javascript

在Javascript中，我们经常会用到画布(canvas)来绘制图形。然而，鼠标的坐标不是数学意义上的画布坐标，这可能会导致一些问题。

举个例子，在一个画布上，如果我们想绘制一个圆形，需要知道圆心的位置，而这个位置通常是通过鼠标的坐标来确定的。但是，鼠标的坐标与画布的坐标系是不同的，因此需要进行转换。

获取鼠标坐标

在Javascript中，可以通过以下代码获取鼠标在页面上的位置：

const canvas = document.getElementById("myCanvas");
const rect = canvas.getBoundingClientRect();
const mouseX = event.clientX - rect.left;
const mouseY = event.clientY - rect.top;

这里，我们通过addEventListener来监听鼠标移动事件，获取event对象，然后计算鼠标在画布上的位置。rect对象表示画布的大小和位置，可以通过canvas.getBoundingClientRect()方法获取。

画布坐标与数学坐标的转换

在画布中，坐标系的原点通常在左上角，x轴向右，y轴向下，而数学坐标系的原点在中心，x轴向右，y轴向上。

因此，在绘制图形时，我们需要将鼠标坐标转换为画布坐标。具体来说，我们需要将y轴坐标取反，像这样：

const canvasY = canvas.height - mouseY;

然后，我们还需要将画布坐标转换为数学坐标。可以通过以下代码实现：

const canvasXNormalized = (mouseX / canvas.width) * 2 - 1;
const canvasYNormalized = (canvasY / canvas.height) * -2 + 1;

这里，我们首先将画布坐标映射到[-1,1]的范围内，然后将y轴取反，得到数学坐标系下的坐标。

代码示例

下面是一个完整的代码示例，可以帮助你更好地理解鼠标坐标与画布坐标之间的转换：

const canvas = document.getElementById("myCanvas");
const rect = canvas.getBoundingClientRect();

canvas.addEventListener("mousedown", function(event) {
  const mouseX = event.clientX - rect.left;
  const mouseY = event.clientY - rect.top;
  const canvasY = canvas.height - mouseY;
  const canvasXNormalized = (mouseX / canvas.width) * 2 - 1;
  const canvasYNormalized = (canvasY / canvas.height) * -2 + 1;
  
  console.log("Mouse position: (" + mouseX + "," + mouseY + ")");
  console.log("Canvas position: (" + canvasXNormalized + "," + canvasYNormalized + ")");
});

结语

通过本文，你可以了解到鼠标坐标与画布坐标之间的转换方式。在使用canvas绘制图形时，需要注意这个问题，否则可能会导致一些错误。