检测画布上的鼠标位置

此示例将显示如何获取相对于画布的鼠标位置，以便 (0,0) 将成为 HTML5 Canvas 的左上角。e.clientX 和 e.clientY 将获得相对于文档顶部的鼠标位置，将其更改为基于画布的顶部我们从客户端 X 和 Y 中减去画布的 left 和 right 位置。

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "16px Arial";

canvas.addEventListener("mousemove", function(e) { 
    var cRect = canvas.getBoundingClientRect();        // Gets CSS pos, and width/height
    var canvasX = Math.round(e.clientX - cRect.left);  // Subtract the 'left' of the canvas 
    var canvasY = Math.round(e.clientY - cRect.top);   // from the X/Y positions to make  
    ctx.clearRect(0, 0, canvas.width, canvas.height);  // (0,0) the top left of the canvas
    ctx.fillText("X: "+canvasX+", Y: "+canvasY, 10, 20);
});

可运行的例子

Math.round 的使用是由于确保 x,y 位置是整数，因为画布的边界矩形可能没有整数位置。