WebGL画布叠加透明Canvas后鼠标坐标与上下文坐标不匹配问题

这个问题我之前也碰到过！核心原因是e.clientX/e.clientY是相对于浏览器视口的坐标，而你的canvas上下文用的是画布自身的像素坐标，两者之间差了画布在页面上的偏移量，还有可能存在CSS缩放导致的像素比例差异，直接用当然会不准啦。

1. 先确保透明Canvas的定位和尺寸正确 #

首先得保证你的transCanvas完全覆盖在WebGL画布上，不然坐标计算再对也没用。给容器和两个Canvas加个基础CSS：

#container {
  position: relative;
  /* 这里可以设置你需要的宽高，比如800px 600px */
  width: 800px;
  height: 600px;
}

#webglCanvas, #transCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

同时要注意：Canvas的width和height属性（画布的实际像素尺寸）要和CSS设置的显示尺寸匹配，不然会出现拉伸变形，坐标也会错位。比如初始化时：

const container = document.getElementById('container');
const transCanvas = document.getElementById('transCanvas');
// 把Canvas的像素尺寸设为容器的显示尺寸（如果需要高清屏适配可以乘以devicePixelRatio）
transCanvas.width = container.clientWidth;
transCanvas.height = container.clientHeight;

2. 转换鼠标坐标到Canvas上下文坐标 #

每次鼠标事件触发时，先获取Canvas在视口中的位置，再计算相对坐标：

function getCanvasMousePos(canvas, e) {
  const rect = canvas.getBoundingClientRect();
  // 计算鼠标相对于Canvas左上角的坐标
  let x = e.clientX - rect.left;
  let y = e.clientY - rect.top;
  
  // 如果Canvas的像素尺寸和显示尺寸不一致（比如CSS缩放了），要乘以缩放比例
  const scaleX = canvas.width / rect.width;
  const scaleY = canvas.height / rect.height;
  x *= scaleX;
  y *= scaleY;
  
  return { x, y };
}

3. 在事件中使用转换后的坐标 #

比如修改你的鼠标绘制逻辑，实现拖拽画矩形的效果：

let isDrawing = false;
let startPos = {};
const $canvas1 = document.getElementById('transCanvas');
const ctx = $canvas1.getContext("2d");

function handleCanvasMouseDown(e) {
  isDrawing = true;
  startPos = getCanvasMousePos($canvas1, e);
}

function handleCanvasMouseMove(e) {
  if (!isDrawing) return;
  
  const currentPos = getCanvasMousePos($canvas1, e);
  // 清空画布（实时更新矩形）
  ctx.clearRect(0, 0, $canvas1.width, $canvas1.height);
  // 绘制矩形：从起始点到当前点的区域
  const width = currentPos.x - startPos.x;
  const height = currentPos.y - startPos.y;
  ctx.beginPath();
  ctx.fillStyle = '#F30';
  ctx.fillRect(startPos.x, startPos.y, width, height);
}

function handleCanvasMouseUp(e) {
  isDrawing = false;
}

// 绑定事件
$canvas1.addEventListener('mousedown', handleCanvasMouseDown);
$canvas1.addEventListener('mousemove', handleCanvasMouseMove);
$canvas1.addEventListener('mouseup', handleCanvasMouseUp);
$canvas1.addEventListener('mouseleave', handleCanvasMouseUp);

这样就能保证你绘制的矩形完全跟着鼠标的实际位置走啦！

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