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>