it-swarm.com.de

Rufen Sie die Mauskoordinaten ab, wenn Sie auf die Leinwand klicken

Eine häufige Frage, aber ich brauche immer noch Hilfe. Ich versuche, die Mauskoordinaten abzurufen und zu speichern, wenn jemand auf der Leinwand klickt. 

mein HTML

<canvas id="puppyCanvas" width="500" height="500" style="border:2px solid black" onclick = "storeGuess(event)"></canvas>

und mein Javascript

//setup canvas
var canvasSetup = document.getElementById("puppyCanvas");
var ctx = canvasSetup.getContext("2d");

guessX = 0;//stores user's click on canvas
 guessY = 0;//stores user's click on canvas

function storeGuess(event){
    var x = event.clientX - ctx.canvas.offsetLeft;
    var y = event.clientY - ctx.canvas.offsetTop;
    /*guessX = x;
    guessY = y;*/


    console.log("x coords:" + x + ", y coords" + y);

Ich habe jede Menge Foren, w3schools und Videos dazu gelesen. Ich bin kurz davor herauszufinden, aber mir fehlt etwas. Ich kann die Koordinaten der Seite abrufen, wenn ich ctx.canvas.offsetLeft und ctx.canvas.offsetTop lösche. Aber ich muss diese irgendwie einbauen, um die Koordinaten der Leinwand zu erhalten, und dann in die Variablen guessX und guessY speichern.

7
MusicGirl

Das erreichen Sie mit der offsetX und offsetY - Eigenschaft von MouseEvent

//setup canvas
var canvasSetup = document.getElementById("puppyCanvas");
var ctx = canvasSetup.getContext("2d");
guessX = 0; //stores user's click on canvas
guessY = 0; //stores user's click on canvas
function storeGuess(event) {
    var x = event.offsetX;
    var y = event.offsetY;
    guessX = x;
    guessY = y;
    console.log("x coords: " + guessX + ", y coords: " + guessY);
}
<canvas id="puppyCanvas" width="500" height="500" style="border:2px solid black" onclick="storeGuess(event)"></canvas>

11
ɢʀᴜɴᴛ

Ich benutze diesen Code.

var myCanvas = document.querySelector('#canvas');

myCanvas.addEventListener('click', function(event) {
    var rect = myCanvas.getBoundingClientRect();
    var x = event.clientX - rect.left;
    var y = event.clientY - rect.top;
    console.log("x: " + x + " y: " + y); 
}, false);
<canvas width="400" height="400" id="canvas" style="background-color: lightblue"></canvas>

3
George Brata