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

Question

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

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

Answer 1

使用 offsetX 和 offsetY x和y鼠标坐标> MouseEvent的属性。

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

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

function getMousePos(event) {
   var x = event.offsetX;
   var y = event.offsetY;
   console.clear();
   console.log(x, y);
}

<div class="cont" style="overflow: scroll; width:450px; height:400px;">
    <canvas id="map" width="4000" height="4000" onmousemove="getMousePos(event)" style="background-color: red;"/>
</div>