html获取鼠标在canvas上的坐标,html5canvas检测鼠标在画布上的位置

示例

本示例将说明如何获取鼠标相对于画布的位置&＃xff0c;例如(0,0)HTML5 Canvas的左上角。的e.clientX和e.clientY将获得相对于文档的顶部位置的鼠标&＃xff0c;来改变这种是基于画布的顶部&＃xff0c;我们减去left&＃xff0c;并right从客户端X和Y的画布位置

var canvas &＃61; document.getElementById("myCanvas");

var ctx &＃61; canvas.getContext("2d");

ctx.font &＃61; "16px Arial";

canvas.addEventListener("mousemove", function(e) {

var cRect &＃61; canvas.getBoundingClientRect();        // 获取CSS pos&＃xff0c;以及宽度/高度

var canvasX &＃61; Math.round(e.clientX - cRect.left);  // 减去画布的“左”

var canvasY &＃61; Math.round(e.clientY - cRect.top);   // 从X / Y位置

ctx.clearRect(0, 0, canvas.width, canvas.height);  // (0,0)画布的左上方

ctx.fillText("X: "&＃43;canvasX&＃43;", Y: "&＃43;canvasY, 10, 20);

});

可运行的例子

之所以使用&＃xff0c;Math.round是因为要确保x,y位置为整数&＃xff0c;因为画布的边界矩形可能没有整数位置。