小编Mus*_*irl的帖子

一个常见问题,但我仍然需要帮助.当有人在画布中点击时,我正试图获取并存储鼠标坐标.

我的HTML

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

和我的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);

我已经阅读了很多论坛,w3schools和视频.我已经接近搞清楚,但我错过了一些东西.如果删除ctx.canvas.offsetLeft和ctx.canvas.offsetTop,我可以获取页面的坐标.但我需要以某种方式合并这些以获取画布的坐标,然后存储到变量guessX和guessY中.