我正在尝试使用 HTML5 画布元素。我想做的一件事是设置一个 mousemove 事件来跟踪画布上的鼠标以进行绘图和其他目的。我无法找到关于如何获取鼠标所在画布中像素的准确坐标的明确答案。我在网上找到了一个包含此 html 的教程（我将背景颜色添加到画布中，以使其在渲染的页面上显而易见）：
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#myCanvas {
background-color: cornflowerblue;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
function writeMessage(canvas, message) {
var context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);
context.font = '18pt Calibri';
context.fillStyle = 'black';
context.fillText(message, 10, 25);
}
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
canvas.addEventListener('mousemove', function(evt) {
var mousePos = getMousePos(canvas, evt);
var message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y;
writeMessage(canvas, message);
}, false);
</script>
</body>
</html>
加载页面后，您会在页面左上角看到画布作为蓝色矩形。将鼠标移到其上，画布中的文本会发生变化，将鼠标位置显示为两个整数，X 和 Y 各一个。
然后，我通过添加顶部和左边距来修改画布样式，并保持页面的其余部分不变。
#myCanvas {
background-color: cornflowerblue;
margin-left: 30px;
margin-top: 30px;
}
当我现在渲染页面时，画布的蓝色矩形按照我的预期从页面的顶部和左侧偏移。但是，将鼠标移到画布上时，画布中显示的 X 和 Y 鼠标坐标将显示为具有许多小数位的浮点数。稍微跟踪一下代码，似乎 getBoundingClientRect() 返回一个矩形，其中顶部和左侧的值是浮点数。
我假设我可以做一些类似截断或舍入 getBoundingClientRect() 返回的值之类的事情，但这对我来说感觉是错误的方法。
我是否以某种方式错误地使用了 getBoundingClientRect() ，或者预期它应该返回浮点值？
在侦听各种鼠标事件时，是否有一种明确的方法可以获取鼠标在画布上的准确 X 和 Y 坐标？
