HTML5 Canvas Координаты мыши

Question

У меня есть файл HTML с элементом <canvas>, и я пытаюсь получить координаты мыши в событии click. Я использую этот код:

secondCanvas.addEventListener('click', function(e) { 
    console.log(e.pageX) 
}, false); 

Когда я нажимаю на левой верхней точке я получаю в консоли 500 ~ число, а не ноль ... Что мне нужно сделать, чтобы получить координаты мыши на холсте ?

Answer 1

Это потому, что вы получаете координаты страницы. Я предполагаю, что вы хотите, чтобы текущая позиция мыши находилась на одном из ваших двух холстов? Надеемся, что это позволит решить вашу проблему:

http://www.html5canvastutorials.com/advanced/html5-canvas-mouse-coordinates/

Также этот StackOverflow похож на ваш, и может дать вам лучше понять: Tracking mouse position in canvas when no surrounding element exists

Решение пользователем: lwburk

function findPos(obj) { 
    var curleft = 0, curtop = 0; 
    if (obj.offsetParent) { 
     do { 
      curleft += obj.offsetLeft; 
      curtop += obj.offsetTop; 
     } while (obj = obj.offsetParent); 
     return { x: curleft, y: curtop }; 
    } 
    return undefined; 
} 

$('#canvas').mousemove(function(e) { 
    var pos = findPos(this); 
    var x = e.pageX - pos.x; 
    var y = e.pageY - pos.y; 
    var coordinateDisplay = "x=" + x + ", y=" + y; 
    writeCoordinateDisplay(coordinateDisplay); 
}); 

Answer 2

вас следует вычислить положение холста мыши путем вычитания смещения элемента холста из смещения события (e.pageX и e.pageY).
Вот link, который объясняет, как получить позицию элемента в DOM, а код должен выглядеть следующим образом:

secondCanvas.addEventListener('click', function(e) { 
    var pos = { 
     x : e.pageX - canvasOffsetX, 
     y : e.pageY - canvasOffsetY 
    }; 
    console.log(pos.x) 
}, false); 

Answer 3

Я использую этот код и он отлично работает для меня. После добавления события холста мыши имеют два новых свойства: canvasX и canvasY, которые правильно отображаются. Сразу после того, как вы получили элемент canvas, не забудьте вызвать canvas.extendMouseEvents(), и вы находитесь в бизнесе.

HTMLCanvasElement.prototype.extendMouseEvents = function() { 
    this.mapMouseEvent = function(ev) { 
     var r = this.getBoundingClientRect(); 
     ev.canvasX = ev.pageX - r.left; 
     ev.canvasY = ev.pageY - r.top; 
    }; 
    this.addEventListener("mousemove", this.mapMouseEvent); 
    this.addEventListener("click", this.mapMouseEvent); 
    this.addEventListener("contextmenu", this.mapMouseEvent); 
    this.addEventListener("dblclick", this.mapMouseEvent); 
    this.addEventListener("mousedown", this.mapMouseEvent); 
    this.addEventListener("mouseenter", this.mapMouseEvent); 
    this.addEventListener("mouseleave", this.mapMouseEvent); 
    this.addEventListener("mouseover", this.mapMouseEvent); 
    this.addEventListener("mouseout", this.mapMouseEvent); 
    this.addEventListener("mouseup", this.mapMouseEvent); 
}