canvas绑定事件的时候,获得鼠标点击的地方在canvas画布内的坐标的方法。
var x = event.clientX - canvas.getBoundingClientRect().left;
var y = event.clientY - canvas.getBoundingClientRect().top;
详细方法:
// 监听点击事件
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);
}
Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。