javascript - HTML5 获取可滚动 div 内 Canvas 的内部坐标

Question

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

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

Answer 1

您可以使用 offsetX 获得相对于 Canvas 的准确 x 和 y 鼠标坐标。 和 offsetY 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>