web-dev-qa-db-fra.com

Obtenir les coordonnées de la souris en cliquant sur la toile

Une question commune, mais j'ai toujours besoin d'aide. J'essaie d'obtenir et de stocker les coordonnées de la souris lorsqu'un utilisateur clique sur le canevas. 

mon HTML

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

et mon 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);

J'ai lu des tas de forums, w3schools et vidéos à ce sujet. Je suis sur le point de comprendre, mais il me manque quelque chose. Je peux obtenir les coordonnées de la page si je supprime les fichiers ctx.canvas.offsetLeft et ctx.canvas.offsetTop. Mais je dois les intégrer d'une manière ou d'une autre pour obtenir les coordonnées du canevas, puis les stocker dans les variables supposeX et supposeY.

canvascoordinatesmouse
7
MusicGirl

Vous pouvez y parvenir en utilisant le offsetX et offsetY propriété de 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
ɢʀᴜɴᴛ

J'utilise ce morceau de 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