两个canvas上下问重叠一起，鼠标滑动如何区分

在HTML5中，如果你有两个Canvas元素想要重叠并且处理鼠标滑动事件，区分它们通常涉及到事件委托和事件冒泡。由于Canvas本身并不直接响应鼠标事件（如drag或mousemove），你需要借助HTML的DOM元素来监听这些事件。

首先，确保每个Canvas都有一个包含它的父元素，比如`<div>`标签。然后，将事件处理器添加到这个父元素上：

<div class="canvas-container">
  <canvas id="canvas1"></canvas>
  <canvas id="canvas2"></canvas>
</div>

接下来，在JavaScript中处理`canvas.container`的事件：

// 获取两个canvas对应的容器
const canvasContainer = document.querySelector('.canvas-container');
const canvas1 = document.getElementById('canvas1');
const canvas2 = document.getElementById('canvas2');

// 添加统一的事件处理器
canvasContainer.addEventListener('mousedown', handleMouseDown);
canvasContainer.addEventListener('mouseup', handleMouseUp);
canvasContainer.addEventListener('mousemove', handleMouseMove);

function handleMouseDown(event) {
  // 记录开始位置，用于计算移动距离
  this.startX = event.clientX;
  this.startY = event.clientY;
}

function handleMouseMove(event) {
  const dx = event.clientX - this.startX;
  const dy = event.clientY - this.startY;

  if (event.target === canvas1 || event.target === canvas2) {
    // 根据目标canvas处理相应的事件逻辑
    if (event.target === canvas1) {
      // 在canvas1上处理滑动
      console.log("Mouse is over canvas1");
      // 实现你的滑动逻辑
    } else if (event.target === canvas2) {
      // 在canvas2上处理滑动
      console.log("Mouse is over canvas2");
      // 实现你的滑动逻辑
    }
  }
}

function handleMouseUp() {
  // 清除开始位置记录
  this.startX = null;
  this.startY = null;
}

这样，当鼠标在重叠区域移动时，事件会根据目标元素（即哪个canvas被点击）触发相应的处理函数。通过判断`event.target`，你可以区分出是哪个Canvas发生了滑动。