canvas移动端点击事件

在移动端，Canvas 的点击事件和 PC 端有些不同。由于移动设备没有鼠标，所以需要使用触摸事件来实现。

以下是一个简单的移动端 Canvas 点击事件的示例代码：

const canvas = document.getElementById('myCanvas');
canvas.addEventListener('touchstart', handleTouchStart, false);

function handleTouchStart(event) {
  event.preventDefault();
  const touch = event.touches[0];
  const x = touch.pageX - canvas.offsetLeft;
  const y = touch.pageY - canvas.offsetTop;
  // 处理点击事件的代码
}

在上面的代码中，我们使用 `touchstart` 事件来监听移动设备的触摸事件。当用户在 Canvas 上触摸屏幕时，会触发该事件，然后调用 `handleTouchStart` 函数来处理该事件。

在 `handleTouchStart` 函数中，我们首先通过 `event.preventDefault()` 来阻止默认的触摸事件，然后使用 `event.touches[0]` 来获取第一个触摸点的位置。由于在移动设备上，Canvas 的位置是相对于屏幕的，所以需要减去 Canvas 的偏移量来得到相对于 Canvas 左上角的位置。

然后可以根据这个位置来处理点击事件的逻辑。需要注意的是，在移动端上，用户可能会使用多个手指同时触摸屏幕，所以需要根据具体的需求来处理多点触摸的情况。