canvas 自适应屏幕后鼠标点击按钮事件如何自适应

当Canvas自适应屏幕后，鼠标点击按钮事件需要根据Canvas的尺寸进行自适应。可以通过以下步骤实现：

1. 获取Canvas元素的尺寸。
2. 监听Canvas元素的鼠标点击事件。
3. 在鼠标点击事件的回调函数中，获取鼠标点击位置相对于Canvas元素的坐标。
4. 根据Canvas元素的尺寸和鼠标点击位置的坐标，计算出真实的点击位置。
5. 根据真实的点击位置来执行对应的操作。

具体实现代码如下：

// 获取Canvas元素
const canvas = document.getElementById('canvas');

// 监听Canvas元素的鼠标点击事件
canvas.addEventListener('click', function (event) {
  // 获取Canvas元素的尺寸
  const rect = canvas.getBoundingClientRect();
  const scaleX = canvas.width / rect.width;
  const scaleY = canvas.height / rect.height;

  // 获取鼠标点击位置相对于Canvas元素的坐标
  const x = (event.clientX - rect.left) * scaleX;
  const y = (event.clientY - rect.top) * scaleY;

  // 根据真实的点击位置执行对应的操作
  // ...
});

这样就可以实现Canvas自适应屏幕后鼠标点击按钮事件的自适应了。