Wie kann ich testen Mauserkennung auf Leinwand (JavaScript), wenn die Höhe der Leinwand auf den Bildschirm des Höhe übersteigt (wenn die Bildlaufleiste angezeigt)

Question

I Mauskoordinaten auf Leinwand testen kann, wenn es keine Bildlaufleiste mit ist:

var mx = evt.clientX - canvas.offsetX 
var my = evt.clientY - canvas.offsetY 

Wenn ich jedoch die Webseite herunterscrolle und die Maus neu positioniere, sind die Koordinaten verzerrt.

Irgendwelche Vorschläge?

Answer 1

Es klingt, als ob Sie versuchen, die Position der Maus auf der Leinwand zu testen (und nicht die Position der Maus auf dem Bildschirm). Dafür reichen evt.offsetX und evt.offsetY aus, auch wenn eine Bildlaufleiste vorhanden ist.

Bitte beachten Sie die hier Live-Demo zu arbeiten, und Ihre JS-Konsole öffnen, und Sie werden die Cursorkoordinaten in Bezug auf die Leinwand sehen sein können:

var canvas = document.getElementsByTagName("canvas")[0]; 
 

 
canvas.onmousemove = function(evt) { 
 
    var mx = evt.offsetX; 
 
    var my = evt.offsetY; 
 
    console.log(mx, my); 
 
}

<canvas height="800" width="200" style="border: solid black 1px"></canvas>