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

你可以得到准确的x和y鼠标坐标，相对于使用的MouseEvent的offsetX和offsetY财产的画布。

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>