获取canvas中鼠标的坐标

代码

// 监听点击事件
canvas.addEventListener("click", function(event) {
    getMousePos(canvas, event);
});

function getMousePos(canvas, event) {
    //1
    var rect = canvas.getBoundingClientRect();
    //2
    var x = event.clientX - rect.left * (canvas.width / rect.width);
    var y = event.clientY - rect.top * (canvas.height / rect.height);
    console.log("x:"+x+",y:"+y);
}

解析

getBoundingClientRect()

这个方法返回的对象有六个属性，如下表：

属性	描述
top	元素上边界距窗口最上边的距离
left	元素左边界距窗口最左边的距离
bottom	元素下边界距窗口最上边的距离
right	元素右边界距窗口最左边的距离
width	元素的宽度
height	元素的高度

rect.left * (canvas.width / rect.width)

之所以要乘一个(canvas.width / rect.width)，是为了保证画布的像素值和显示在页面上的尺寸不一致的情况下，也能够正确获取到鼠标相对于canvas中的坐标。

附

画布的像素值和显示在页面上的尺寸不一致的情况

<canvas id="canvasId" width="100" height="100" style="width: 500px;height: 500px;"></canvas>