这是一个似乎有效的代码片段，您可以根据自己的目的对其进行调整。
我用的是：
function toCanvasCoords(pageX, pageY, scale) {
var rect = canvas.getBoundingClientRect();
let x = (pageX - rect.left) / scale;
let y = (pageY - rect.top) / scale;
return toPoint(x, y);
}
和
function toScreenCoords(x, y, scale) {
var rect = canvas.getBoundingClientRect();
let wx = x * scale + rect.left + scrollElement.scrollLeft;
let wy = y * scale + rect.top + scrollElement.scrollTop;
return toPoint(wx, wy);
}
我只是从window对象中获取鼠标位置。我可能弄错了，但我认为这就是为什么scrollLeft并且scrollTop不出现toCanvasCoords（因为位置是相对于窗口本身的客户区，滚动不会进入其中）。但是当你变回来时，你必须考虑到它。
这最终只是返回鼠标相对于窗口的位置（这是输入），所以如果你只想将一个元素附加到鼠标指针上，那么实际上没有必要以迂回的方式进行整个转换。但是，如果您想将某些东西附加到画布图像上的某个点（例如，地图上的一个特征），则转换回来很有用 - 我猜这是您想要的东西，因为您说过您想要在覆盖 div 上渲染标记。
在下面的代码片段中，红色圆圈在画布本身的返回位置处绘制toCanvasCoords；您会注意到它与背景一起缩放。
我没有使用覆盖整个地图的覆盖 div，我只是使用绝对定位在顶部放置了几个小 div。黑色三角形是一个 div (#tracker)，它基本上跟踪鼠标；它被放置在 的结果处toScreenCoords。它用作检查转换是否正常工作的一种方式。它是一个独立的元素，因此它不会随图像缩放。
红色三角形是另一个这样的 div (#feature)，它展示了前面提到的“附加到特征”的想法。假设背景是类似地图的东西，并且假设您想将“地图图钉”图标附加到其上的某些东西上，例如特定的十字路口；您可以在地图上获取该位置（这是一个固定值），并将其传递给toScreenCoords. 在下面的代码片段中，我将它与背景上的一个正方形的角对齐，以便您可以在更改比例和/或滚动时直观地跟踪它。（单击“运行代码片段”后，您可以单击“整页”，然后调整窗口大小以获取滚动条）。
现在，根据您的代码中到底发生了什么，您可能需要调整一些东西，但希望这会对您有所帮助。如果您遇到问题，请使用 console.log 和/或在页面上放置一些调试元素，这些元素将为您实时显示值（例如鼠标位置、客户矩形等），以便您可以检查值。并一次采取一步 - 例如首先让比例工作，但忽略滚动，然后尝试让滚动工作，但将比例保持在 1 等。
const canvas = document.getElementById('canvas');
const context = canvas.getContext("2d");
const tracker = document.getElementById('tracker');
const feature = document.getElementById('feature');
const slider = document.getElementById("scale-slider");
const scaleDisplay = document.getElementById("scale-display");
const scrollElement = document.querySelector('html');
const bgImage = new Image();
bgImage.src = "https://i.stack.imgur.com/yxtqw.jpg"
var bgImageLoaded = false;
bgImage.onload = () => { bgImageLoaded = true; };
var mousePosition = toPoint(0, 0);
var scale = 1;
function updateMousePosition(evt) {
mousePosition = toPoint(evt.clientX, evt.clientY);
}
function getScale(evt) {
scale = evt.target.value;
scaleDisplay.textContent = scale;
}
function toCanvasCoords(pageX, pageY, scale) {
var rect = canvas.getBoundingClientRect();
let x = (pageX - rect.left) / scale;
let y = (pageY - rect.top) / scale;
return toPoint(x, y);
}
function toScreenCoords(x, y, scale) {
var rect = canvas.getBoundingClientRect();
let wx = x * scale + rect.left + scrollElement.scrollLeft;
let wy = y * scale + rect.top + scrollElement.scrollTop;
return toPoint(wx, wy);
}
function toPoint(x, y) {
return { x: x, y: y }
}
function roundPoint(point) {
return {
x: Math.round(point.x),
y: Math.round(point.y)
}
}
function update() {
context.clearRect(0, 0, 500, 500);
context.save();
context.scale(scale, scale);
if (bgImageLoaded)
context.drawImage(bgImage, 0, 0);
const canvasCoords = toCanvasCoords(mousePosition.x, mousePosition.y, scale);
drawTarget(canvasCoords);
const trackerCoords = toScreenCoords(canvasCoords.x, canvasCoords.y, scale);
updateTrackerLocation(trackerCoords);
updateFeatureLocation()
context.restore();
requestAnimationFrame(update);
}
function drawTarget(location) {
context.fillStyle = "rgba(255, 128, 128, 0.8)";
context.beginPath();
context.arc(location.x, location.y, 8.5, 0, 2*Math.PI);
context.fill();
}
function updateTrackerLocation(location) {
const canvasRectangle = offsetRectangle(canvas.getBoundingClientRect(),
scrollElement.scrollLeft, scrollElement.scrollTop);
if (rectContains(canvasRectangle, location)) {
tracker.style.left = location.x + 'px';
tracker.style.top = location.y + 'px';
}
}
function updateFeatureLocation() {
// suppose the background is a map, and suppose there's a feature of interest
// (e.g. a road intersection) that you want to place the #feature div over
// (I roughly aligned it with a corner of a square).
const featureLoc = toScreenCoords(84, 85, scale);
feature.style.left = featureLoc.x + 'px';
feature.style.top = featureLoc.y + 'px';
}
function offsetRectangle(rect, offsetX, offsetY) {
// copying an object via the spread syntax or
// using Object.assign() doesn't work for some reason
const result = JSON.parse(JSON.stringify(rect));
result.left += offsetX;
result.right += offsetX;
result.top += offsetY;
result.bottom += offsetY;
result.x = result.left;
result.y = result.top;
return result;
}
function rectContains(rect, point) {
const inHorizontalRange = rect.left <= point.x && point.x <= rect.right;
const inVerticalRange = rect.top <= point.y && point.y <= rect.bottom;
return inHorizontalRange && inVerticalRange;
}
window.addEventListener('mousemove', (e) => updateMousePosition(e), false);
slider.addEventListener('input', (e) => getScale(e), false);
requestAnimationFrame(update);
#canvas {
border: 1px solid gray;
}
#tracker, #feature {
position: absolute;
left: 0;
top: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 10px solid black;
transform: translate(-4px, 0);
}
#feature {
border-bottom: 10px solid red;
}
<div>
<label for="scale-slider">Scale:</label>
<input type="range" id="scale-slider" name="scale-slider" min="0.5" max="2" step="0.02" value="1">
<span id="scale-display">1</span>
</div>
<canvas id="canvas" width="500" height="500"></canvas>
<div id="tracker"></div>
<div id="feature"></div>
PS不要这样做Number.parseInt(x.toFixed(0))；通常，尽可能长时间地使用浮点数以最大程度地减少错误的累积，并且仅在最后一分钟转换为 int。我已经包含了roundPoint将点的 (x, y) 坐标四舍五入到最接近的整数 (via Math.round) 的函数，但最终根本不需要使用它。
注意：下图在代码片段中作为背景，作为缩放的参考点；它包含在此处只是为了将其托管在 Stack Exchange 的 imgur.com 帐户上，因此代码不会引用（可能不稳定的）第 3 层源。
