Javascriptキャンバス上のクリックリスナーでカーソルのx値とy値を取得

Question

ユーザーがキャンバスをクリックしたときにカーソルのxとyの値が必要です。私はインターネット上のすべてを見て、これを行うためのさまざまな方法が見つかりましたが、私はクリアし、フレームでキャンバスを更新するため、彼らは動作しないと私は信じています。私はキーのクリックを動かすことができました。

私はちょうどコードを学び、多くの説明が必要です。あなたはそれが動作するはずです「マウスダウン」する「れるonmousedown」から変更した場合

var canvas_area = { 
canvas : document.createElement("canvas"), 
start : function() { 
    this.canvas.width = canvas_width; 
    this.canvas.height = canvas_height; 
    this.context = this.canvas.getContext("2d"); 
    document.body.insertBefore(this.canvas, document.body.childNodes[0]); 
    this.frameNo = 0; 
    this.interval = setInterval(updateGameArea, 20); 
    window.addEventListener('keydown', function (e) { 
     e.preventDefault(); 
     canvas_area.keys = (canvas_area.keys || []); 
     canvas_area.keys[e.keyCode] = (e.type == "keydown"); 
    }) 
    window.addEventListener('keyup', function (e) { 
     canvas_area.keys[e.keyCode] = (e.type == "keydown");    
    }) 
    canvas.addEventListener('onmousedown', function(event) { 
     canvas_area.cursor_position = event.clientX + ", " + event.clientY; 
    }) 
}, 
stop_bar : function() { 
    clearInterval(this.interval); 
},  
clear : function() { 
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); 
} 
} 

function updateGameArea() { 
    canvas_area.clear(); 

    if (canvas_area.keys && canvas_area.keys[27]) {alert("pause");}//press escape key to use (27 is the escape key) 
    if (canvas_area.cursor_position){ 
     alert(canvas_area.cursor_position); 
    }//does not work 

Answer 1

canvas_area.canvas.addEventListener("click", getClickPosition, false); 
function getClickPosition(e){ 
var xPosition = e.clientX; 
    var yPosition = e.clientY; 
return {x: xPosition, y: yPosition} 
} 

Answer 2

：ここ

は、私のコードの簡易版です。 canvas要素は、ウィンドウの[0,0]でめったにありませんので

はあなたにも対canvas要素のオフセット位置を考慮しなければならない、jsbin

http://jsbin.com/pimeri/81/edit?html,css,js,output

var elem = document.getElementById('canvas'); 

elem.addEventListener('mousemove', function(event) { 
    var x = parseInt(event.pageX - elem.offsetLeft); 
    var y = parseInt(event.pageY - elem.offsetTop); 
}) 

elem.addEventListener('mousedown', function(event){ 
    var x = parseInt(event.pageX - elem.offsetLeft); 
    var y = parseInt(event.pageY - elem.offsetTop); 
}) 

elem.addEventListener('mouseup', function(event){ 
    var x = parseInt(event.pageX - elem.offsetLeft); 
    var y = parseInt(event.pageY - elem.offsetTop); 
})