本示例将说明如何获取鼠标相对于画布的位置,例如(0,0)HTML5 Canvas的左上角。的e.clientX和e.clientY将获得相对于文档的顶部位置的鼠标,来改变这种是基于画布的顶部,我们减去left,并right从客户端X和Y的画布位置
var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.font = "16px Arial"; canvas.addEventListener("mousemove", function(e) { var cRect = canvas.getBoundingClientRect(); // 获取CSS pos,以及宽度/高度 var canvasX = Math.round(e.clientX - cRect.left); // 减去画布的“左” var canvasY = Math.round(e.clientY - cRect.top); // 从X / Y位置 ctx.clearRect(0, 0, canvas.width, canvas.height); // (0,0)画布的左上方 ctx.fillText("X: "+canvasX+", Y: "+canvasY, 10, 20); });
可运行的例子
之所以使用,Math.round是因为要确保x,y位置为整数,因为画布的边界矩形可能没有整数位置。