web-dev-qa-db-ja.com

キャンバスをクリックしたときにマウスの座標を取得する

よくある質問ですが、まだ助けが必要です。誰かがキャンバス内をクリックしたときにマウスの座標を取得して保存しようとしています。

私の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に格納する必要があります。

canvascoordinatesmouse
8
MusicGirl

offsetX および offsetYMouseEventのプロパティ

_//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>
12
ɢʀᴜɴᴛ

私はこのコードを使用しています。

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>
4
George Brata