获取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>