HTML5 Innere Koordinaten von Canvas in scrollbaren div bekommen

Question

Ich habe eine Leinwand, in der ich ein Bild (es stellt eine Karte) von 4000x4000 Pixel. Die Arbeitsfläche ist in ein verschiebbares Teil eingebettet, dessen Größe kleiner als die Größe der Arbeitsfläche ist. Ich brauche die Koordinaten, über die der Mauszeiger in Bezug auf das 4000x4000 Bild, das in der Zeichenfläche gezeichnet wird, passiert, was bedeutet, dass es auch das mögliche Scrollen berücksichtigen muss. mit offsetX und offsetY Eigenschaft Mouse

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

Answer 1

Sie können genaue x und y Mauskoordinaten, bezogen auf die Leinwand zu bekommen.

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>