javascript - 获取 Canvas 中光标的位置

Question

我试图在单击时获取 canavs 中的光标位置，但我的控制台中弹出以下错误

Uncaught TypeError: canvas.getBoundingClientRect is not a function

这是我的代码:

$(".canvas-wrapper").click(function getCursorPosition(canvas, event) {
  var rectangle = canvas.getBoundingClientRect();
    var x = event.clientX - rectangle.left;
    var y = event.clientY - rectangle.top;
    console.log("x: " + x + " y: " + y);
});

我根本不明白出了什么问题。有什么帮助吗？

Answer 1

jQuery 传递给回调函数的第一个参数不是元素，而是事件对象。可以通过 this 访问该元素。

来自jQuery docs :

handler

Type: Function( Event eventObject )
A function to execute each time the event is triggered.

您可以将代码更改为:

$(".canvas-wrapper").click(function getCursorPosition(event) {
  var rectangle = this.getBoundingClientRect();
    var x = event.clientX - rectangle.left;
    var y = event.clientY - rectangle.top;
    console.log("x: " + x + " y: " + y);
});