Canvas缩放后绘图鼠标位置偏移问题求助

你的鼠标位置偏移问题核心来自三个关键错误：

• rect变量仅在页面初始化时获取一次，后续窗口resize、图像加载后Canvas的位置/显示尺寸变化，rect未更新，导致坐标换算用了旧数据
• resize函数强制把Canvas尺寸设为窗口大小，和overlayImage里按图像比例缩放Canvas的逻辑冲突，导致尺寸混乱
• 未区分Canvas的绘图缓冲区尺寸（canvas.width/height）和页面显示尺寸（CSS宽高），两者不匹配时坐标映射必然出错

1. 实时更新Canvas位置信息 #

每次计算鼠标坐标前，重新获取getBoundingClientRect()的最新值，避免使用初始化时的旧数据。

2. 分离绘图尺寸与显示尺寸 #

让Canvas的绘图缓冲区尺寸对应图像缩放后的实际像素大小，用CSS控制Canvas在页面上的显示尺寸（比如自适应窗口），避免直接修改canvas.width/height适配窗口。

3. 统一坐标换算逻辑 #

根据Canvas显示尺寸和绘图尺寸的比例，将鼠标的页面坐标转换成Canvas的绘图坐标。

修正后的完整代码 #

图像加载与Canvas初始化

function overlayImage() {
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    const img = this; 

    // 计算图像缩放比例，适配Canvas的CSS显示尺寸
    const displayWidth = canvas.offsetWidth;
    const displayHeight = canvas.offsetHeight;
    const scaleX = displayWidth / img.width;
    const scaleY = displayHeight / img.height;
    const scale = Math.min(scaleX, scaleY); 
    
    // 设置Canvas绘图缓冲区的实际像素尺寸
    const drawWidth = img.width * scale;
    const drawHeight = img.height * scale;
    canvas.width = drawWidth;
    canvas.height = drawHeight;
    
    // 清空画布并绘制缩放后的图像
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(img, 0, 0, drawWidth, drawHeight); 
}

鼠标事件与窗口resize处理

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
let coord = { x: 0, y: 0 };
let isDrawing = false;

// 初始化Canvas的CSS显示尺寸为窗口大小
function resizeCanvasDisplay() {
    canvas.style.width = `${window.innerWidth}px`;
    canvas.style.height = `${window.innerHeight}px`;
    // 若已加载图像，可重新渲染适配新窗口（按需启用）
    // if (window.loadedImage) overlayImage.call(window.loadedImage);
}
resizeCanvasDisplay();

// 实时转换鼠标坐标到Canvas绘图缓冲区
function getCanvasCoord(event) {
    const rect = canvas.getBoundingClientRect();
    const scaleX = canvas.width / rect.width;
    const scaleY = canvas.height / rect.height;
    return {
        x: (event.clientX - rect.left) * scaleX,
        y: (event.clientY - rect.top) * scaleY
    };
}

function start(event) {
    isDrawing = true;
    coord = getCanvasCoord(event);
}

function draw(event) {
    if (!isDrawing) return;
    const newCoord = getCanvasCoord(event);
    ctx.beginPath();
    ctx.lineWidth = 5;
    ctx.lineCap = "round";
    ctx.strokeStyle = "black";
    ctx.moveTo(coord.x, coord.y);
    ctx.lineTo(newCoord.x, newCoord.y);
    ctx.stroke();
    coord = newCoord;
}

function stop() {
    isDrawing = false;
}

// 绑定事件到Canvas而非全局，避免误触发
canvas.addEventListener("mousedown", start);
document.addEventListener("mouseup", stop);
canvas.addEventListener("mousemove", draw);
window.addEventListener("resize", resizeCanvasDisplay);

额外优化点 #

• 把鼠标事件绑定在Canvas元素上，而非document，避免在Canvas外点击触发绘图
• 用isDrawing状态变量控制绘图逻辑，比反复添加/移除事件监听更稳定
• 若支持重新上传图像，可将加载后的图像对象存在全局变量中，resize时重新调用overlayImage适配

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