固定尺寸Canvas（Flex布局）及Resize时鼠标坐标精度丢失问题求助

问题核心在于：Canvas存在两个独立尺寸——绘图缓冲区尺寸（通过width/height属性设置）和CSS显示尺寸（通过样式设置）。当两者不一致（比如用Flex布局拉伸缩放Canvas，或手动设置的CSS尺寸与属性尺寸不匹配）时，直接使用e.x/e.y拿到的是页面坐标系的坐标，无法对应到Canvas内部的绘图坐标。

解决方案步骤： #

1. 对齐绘图与显示尺寸（推荐）
   如果目标是让Canvas以800px×400px的尺寸显示，直接将Canvas的属性与CSS样式统一：

canvas {
  width: 800px;
  height: 400px;
  /* Flex布局相关样式，比如居中 */
  margin: auto;
}

const canvas = document.getElementById('canvas');
// 绘图缓冲区尺寸与显示尺寸一致，避免失真和坐标错位
canvas.width = 800;
canvas.height = 400;

2. 计算坐标转换比例
   无论Canvas是否被Flex布局缩放，都需要通过getBoundingClientRect()获取Canvas在视口中的实际位置和显示尺寸，计算页面坐标到Canvas内部坐标的转换比例：

function getCanvasScale(canvas) {
  const rect = canvas.getBoundingClientRect();
  return {
    scaleX: canvas.width / rect.width,
    scaleY: canvas.height / rect.height,
    offsetLeft: rect.left,
    offsetTop: rect.top
  };
}

3. 转换鼠标坐标到Canvas内部坐标系
   在鼠标移动事件中，用上述比例转换坐标：

const mouse = { x: undefined, y: undefined };
// 注意修复拼写错误：addEventListner → addEventListener
canvas.addEventListener('mousemove', function(e) {
  const { scaleX, scaleY, offsetLeft, offsetTop } = getCanvasScale(canvas);
  // 先减去Canvas在视口中的偏移，再乘以缩放比例得到内部精准坐标
  mouse.x = (e.clientX - offsetLeft) * scaleX;
  mouse.y = (e.clientY - offsetTop) * scaleY;
  // 可选：限制坐标在Canvas范围内，避免越界
  mouse.x = Math.max(0, Math.min(mouse.x, canvas.width));
  mouse.y = Math.max(0, Math.min(mouse.y, canvas.height));
});

4. 处理窗口Resize事件
   如果Flex布局会让Canvas随窗口大小改变（比如设置了flex: 1），需在窗口resize时重新计算缩放比例，若要保持绘图比例，可同步调整绘图缓冲区尺寸：

window.addEventListener('resize', function() {
  const rect = canvas.getBoundingClientRect();
  // 保持800/400的比例（2:1）
  const aspectRatio = 2;
  let newWidth = rect.width;
  let newHeight = newWidth / aspectRatio;
  // 若高度超出容器，以高度为准调整宽度
  if (newHeight > rect.height) {
    newHeight = rect.height;
    newWidth = newHeight * aspectRatio;
  }
  // 更新绘图缓冲区尺寸
  canvas.width = newWidth;
  canvas.height = newHeight;
  // 这里重新绘制你的像素效果
});

关键注意点： #

• 不要混淆Canvas的width/height属性（绘图缓冲区）和CSS的width/height（显示尺寸）。
• 使用e.clientX/e.clientY而非e.x/e.y，前者兼容性更好，是相对于视口的坐标。

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