Canvas点击检测：如何调用光标位置获取函数实现点击检测

嘿，我来帮你搞定这个Canvas点击坐标的问题！你只需要给Canvas绑定点击事件监听器，然后在回调里调用你的getCursorPosition函数就行，下面是具体的实现步骤和完整示例：

核心思路 #

你需要先给Canvas元素绑定click事件，然后在事件回调函数里传入Canvas对象和事件对象，调用getCursorPosition获取相对于Canvas的点击坐标——这个坐标刚好适配你的800*800网格场景。

完整代码示例 #

假设你的Canvas元素id是gridCanvas，整合后的代码如下：

<!-- 你的800*800 Canvas -->
<canvas id="gridCanvas" width="800" height="800"></canvas>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// 你已有的坐标获取函数
function getCursorPosition(canvas, event) { 
  var x, y; 
  canoffset = $(canvas).offset(); 
  x = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft - Math.floor(canoffset.left); 
  y = event.clientY + document.body.scrollTop + document.documentElement.scrollTop - Math.floor(canoffset.top) + 1; 
  return [x,y]; 
}

// 确保DOM加载完成后再绑定事件
$(document).ready(function() {
  // 方式1：用原生JS绑定点击事件
  const canvas = document.getElementById('gridCanvas');
  canvas.addEventListener('click', function(event) {
    const [clickX, clickY] = getCursorPosition(canvas, event);
    // 这里可以处理点击后的逻辑，比如标记网格点
    console.log(`点击了Canvas内部坐标：x=${clickX}, y=${clickY}`);
  });

  // 方式2：用jQuery绑定点击事件（更简洁）
  // $('#gridCanvas').on('click', function(event) {
  //   const [clickX, clickY] = getCursorPosition(this, event);
  //   console.log(`点击坐标：(${clickX}, ${clickY})`);
  // });

  // 可选：给Canvas画个网格方便测试
  const ctx = canvas.getContext('2d');
  ctx.strokeStyle = '#eee';
  const gridSize = 50; // 网格间距
  for(let i = 0; i <= 800; i += gridSize) {
    // 画竖线
    ctx.beginPath();
    ctx.moveTo(i, 0);
    ctx.lineTo(i, 800);
    ctx.stroke();
    // 画横线
    ctx.beginPath();
    ctx.moveTo(0, i);
    ctx.lineTo(800, i);
    ctx.stroke();
  }
});
</script>

关键细节说明 #

• 调用getCursorPosition时，第一个参数必须是原生Canvas DOM元素：如果用jQuery选择器，记得用[0]或者this（在jQuery事件回调里）来获取原生对象。
• 函数返回的x,y是相对于Canvas左上角的坐标，完全适配你的网格操作需求，不用再额外转换。
• 如果需要监听鼠标移动（比如 hover 时显示坐标），只需要把click事件换成mousemove，调用方式完全一致。

内容的提问来源于stack exchange，提问作者JackGab