html 获取鼠标在canvas上的坐标,获取鼠标在 canvas 中的位置

一般情况

一般情况下，如果需要在 canvas 中获取鼠标指针坐标，可以通过监听鼠标的 mousemove(如果只需单击时的坐标，可以用 click)事件。 当事件被触发时，我们可以获取鼠标相对于 viewport 的坐标(event.clientX, event.clientY)。 同时，我们可以通过 canvas.getBoundingClientRect() 来获取 canvas 相对于 viewport 的坐标，这样我们就可以计算出鼠标在 canvas 中的坐标。

canvas.addEventListener("click", function __handler__(evt) {

var x = evt.clientX;

var y = evt.clientY;

var rect = canvas.getBoundingClientRect();

x -= rect.left;

y -= rect.top;

console.log(x, y); // (x, y) 就是鼠标在 canvas 单击时的坐标

});

设置了 border/padding

一般情况下，我们根据上面的方法获取出来的坐标是准确的，但当我们在 canvas 上添加了 border 或 padding 后，坐标就出现了偏移。

这是因为在 canvas 中，坐标区域是 canvas 元素的 content 区域，不包括 border 和 padding，而通过上面得到的坐标原点在 canvas 的 border 开始的。因此，这里还需要减去 border 和 padding。

var style = window.getComput