难点在于，cavas可能放大，然后画图的坐标就会改变了，必须也要跟着放大缩小。
// 监听点击事件
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>