Javascript HTML5在可滚动div中获取画布的内部坐标

我有一个画布，我在其中绘制了一幅4000x4000像素的图像（它代表一幅地图）。画布嵌入在可滚动的div中，其大小小于画布大小。 我需要获得鼠标指针相对于画布中绘制的4000x4000图像经过的坐标，这意味着它还需要考虑可能的滚动

<div class="" style="overflow: scroll; width:450px; height:200px;">
    <canvas id="map" onmousemove="getMousePos(event)">
    </canvas>
</div>

---

您可以使用MouseEvent的和属性获得相对于画布的精确的

x

和

y

鼠标坐标

function getMousePos(event) {
   var x = event.offsetX;
   var y = event.offsetY;
}

ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ

函数getMousePos（事件）{ var x=事件补偿x； 变量y=event.offsetY； console.clear（）； 控制台日志（x，y）； }

我想接下来我必须移动父节点（本例中为div）滚动量的所有内容。不，您不必这样做。