如何在网页上找到鼠标的准确位置答案

【问题标题】：How to find the exact position of the mouse on the webpage如何在网页上找到鼠标的准确位置
【发布时间】：2021-03-09 03:11:27
【问题描述】：

我一直在尝试开发绘图应用程序。当我尝试绘制一个用于徒手绘图的点时，该点距离鼠标指针的实际位置大约 100 个像素。有什么办法可以得到鼠标的确切位置吗？您可以查看并运行下面的代码。

const canvasEle = document.getElementById('drawContainer');
const context = canvasEle.getContext('2d');


function setMousePosition (e) {
    var x = e.clientX;
    var y = e.clientY;
    console.log("x coord " + x + " y coord " + y);
    
    changePixelColor(x, y)
}

function changePixelColor (x, y) {
    context.fillRect(x,y,1,1);
}

canvasEle.addEventListener("mousemove", setMousePosition)

canvas {
    border: 1px solid black;
    width: 500px;
    height: 500px;
    position: absolute;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Draw</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <canvas id="drawContainer"></canvas>
</body>
<script src="app.js"></script>
</html>

【问题讨论】：

标签： javascript html css canvas html5-canvas

【解决方案1】：

试试这样：

const canvasEle = document.getElementById('drawContainer');
const context = canvasEle.getContext('2d');
const cr = canvasEle.getBoundingClientRect();

function setMousePosition (e) {
    var x = e.clientX - cr.x;
    var y = e.clientY - cr.y;
    console.log("x coord " + x + " y coord " + y);
    
    changePixelColor(x, y)
}

function changePixelColor (x, y) {
    context.fillRect(x,y,1,1);
}

canvasEle.width  = 500;
canvasEle.height = 500;
canvasEle.addEventListener("mousemove", setMousePosition)

canvas {
    border: 1px solid black;
    width: 500px;
    height: 500px;
    position: absolute;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Draw</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <canvas id="drawContainer"></canvas>
</body>
<script src="app.js"></script>
</html>

解决这个问题的两个补充：

偏移setMousePosition 中的x 和y 值，使它们相对于画布位置，而不是相对于页面。
在 JavaScript 或 HTML 属性中设置 canvas 元素的 width 和 height。

【讨论】：

【解决方案2】：

尝试从 CSS 中移除高度和宽度，并改用画布的宽度和高度属性。将鼠标置于绘制矩形中心的另一个技巧是减去矩形大小的一半，例如context.fillRect(x-0.5,y-0.5,1,1)。在您的情况下，实际上很难看到该点未居中，因此请尝试使用 context.fillRect(x-25,y-25,50,50) ，您会看到与 context.fillRect(x-25, y,50,50)

const canvasEle = document.getElementById('drawContainer');
const context = canvasEle.getContext('2d');


function setMousePosition (e) {
    var x = e.clientX;
    var y = e.clientY;
    //console.log("x coord " + x + " y coord " + y);
    
    changePixelColor(x, y)
}

function changePixelColor (x, y) {
 context.fillRect(x-0.5,y-0.5,1,1);
 //context.fillRect(x,y,50,50); compare these to see the difference
 //context.fillRect(x-25,y-25,50,50);
}

canvasEle.addEventListener("mousemove", setMousePosition)

canvas {
    border: 1px solid black;
    position: absolute;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Draw</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
     <canvas width="500" height="500" id="drawContainer"></canvas>
</body>
<script src="app.js"></script>
</html>

【讨论】：

别担心！快乐的黑客:)