HTML Canvas/Vanilla JS动态尺寸图像绘制坐标错误求助

你的问题核心是Canvas的实际分辨率尺寸与显示尺寸不匹配，导致鼠标获取的显示坐标和画布内部的绘制坐标错位。以下是具体解决方法：

问题根源 #

Canvas有两个独立的尺寸：

• 画布属性尺寸（canvas.width/canvas.height）：决定图像的实际分辨率，保存时会采用这个尺寸。
• CSS显示尺寸：控制Canvas在页面上的显示大小，会对画布内容进行缩放。

你将Canvas的属性尺寸设为图像原始分辨率，但用CSS缩放了显示大小，此时鼠标事件获取的是显示区域的坐标，直接用这些坐标绘制就会出现偏移。

解决方案步骤 #

1. 计算缩放比例 #

在图像加载完成后，计算画布实际尺寸与显示尺寸的比例：

const rect = canvas.getBoundingClientRect();
const scaleX = canvas.width / rect.width;
const scaleY = canvas.height / rect.height;

2. 封装坐标转换函数 #

把鼠标的客户端坐标转换为Canvas的实际绘制坐标：

function getCanvasCoordinates(e) {
  const rect = canvas.getBoundingClientRect();
  const scaleX = canvas.width / rect.width;
  const scaleY = canvas.height / rect.height;
  
  return {
    x: (e.clientX - rect.left) * scaleX,
    y: (e.clientY - rect.top) * scaleY
  };
}

3. 应用到绘制逻辑中 #

修改绘制相关事件，使用转换后的坐标：

let isDrawing = false;
let lastX, lastY;

canvas.addEventListener('mousedown', (e) => {
  isDrawing = true;
  const coords = getCanvasCoordinates(e);
  [lastX, lastY] = [coords.x, coords.y];
});

canvas.addEventListener('mousemove', (e) => {
  if (!isDrawing) return;
  const coords = getCanvasCoordinates(e);
  
  ctx.beginPath();
  ctx.moveTo(lastX, lastY);
  ctx.lineTo(coords.x, coords.y);
  ctx.stroke();
  
  [lastX, lastY] = [coords.x, coords.y];
});

canvas.addEventListener('mouseup', () => isDrawing = false);

4. 适配显示与分辨率 #

为了让Canvas在页面上自适应显示且保持比例，用CSS设置max-width和max-height，不要直接设置width/height：

canvas {
  max-width: 100%;
  max-height: 80vh;
  border: 1px solid #ccc;
}

这样处理后，绘制的坐标就会和鼠标位置完全对应，同时保存的图像也会保留原始图像的分辨率。

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