获取点击事件在 canvas 内的位置

javascript
const canvas = document.getElementById('myCanvas');
canvas.addEventListener('click', function(event) {
  const rect = canvas.getBoundingClientRect();
  const x = event.clientX - rect.left;
  const y = event.clientY - rect.top;
  
  console.log(`(x: ${x}, y: ${y})`);
});

上面的代码没有考虑页面滚动的情况。在页面滚动时，event.clientX 和 event.clientY 返回的坐标将不再是相对于视口的坐标，而应该是相对于整个文档的坐标。

为了解决这个问题，我们需要加上一个偏移量来计算点击事件相对于 canvas 左上角的坐标。具体来说，可以使用 window.pageXOffset 和 window.pageYOffset 获取当前文档已经滚动的距离，并将其加到计算中。修改后的代码如下：

javascript
const canvas = document.getElementById('myCanvas');
canvas.addEventListener('click', function(event) {
  const rect = canvas.getBoundingClientRect();
  const x = event.clientX - rect.left - window.pageXOffset;
  const y = event.clientY - rect.top - window.pageYOffset;
  
  console.log(`(x: ${x}, y: ${y})`);
});