canvas获取鼠标轨迹相对坐标

2,988 阅读1分钟

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()方法返回元素的大小及其相对于视口的位置。