双Canvas适配容器后绘制线条位置与点击位置不符问题

我帮你分析下这个双Canvas点击错位的问题——其实核心是Canvas的绘图像素坐标系和页面显示坐标系没有对齐，再加上双Canvas的布局定位问题，导致点击位置和绘制位置偏差。下面给你一套完整的解决步骤：

1. 同步双Canvas的绘图尺寸与显示尺寸 #

Canvas有两个关键尺寸：width/height属性是它的实际绘图像素分辨率，而CSS的width/height是它在页面上的显示大小。如果这两个尺寸不一致，就会导致坐标缩放错位。我们需要让两者始终匹配容器的尺寸：

const container = document.getElementById('canvas-container');
const topCanvas = document.getElementById('top-canvas');
const bottomCanvas = document.getElementById('bottom-canvas');

// 适配Canvas尺寸到容器
function resizeCanvases() {
    const { width, height } = container.getBoundingClientRect();
    // 设置绘图分辨率（用整数像素避免模糊）
    topCanvas.width = Math.floor(width);
    topCanvas.height = Math.floor(height);
    bottomCanvas.width = Math.floor(width);
    bottomCanvas.height = Math.floor(height);
    // 设置显示尺寸（也可以用CSS写死100%，这里做兜底）
    topCanvas.style.width = `${width}px`;
    topCanvas.style.height = `${height}px`;
    bottomCanvas.style.width = `${width}px`;
    bottomCanvas.style.height = `${height}px`;
    
    // 重新绘制底层Canvas的背景图（如果需要）
    drawBackgroundImage();
}

// 初始化+监听窗口/容器 resize 事件
resizeCanvases();
window.addEventListener('resize', resizeCanvases);

对应的CSS要确保双Canvas在容器内重叠：

#canvas-container {
    position: relative;
    /* 这里设置你的容器尺寸，比如自适应父容器 */
    width: 100%;
    height: 500px;
}

#top-canvas, #bottom-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#bottom-canvas {
    z-index: 1; /* 底层承载图片 */
}

#top-canvas {
    z-index: 2; /* 顶层绘制线条 */
    background-color: transparent; /* 透明才能看到底层图片 */
}

2. 转换点击事件坐标到Canvas绘图坐标系 #

点击事件的clientX/clientY是相对于浏览器视口的位置，我们需要把它转换成Canvas内部的绘图坐标。这个转换要考虑Canvas在页面上的偏移，以及可能的缩放比例（即使我们同步了尺寸，保留缩放计算会让代码更健壮）：

// 工具函数：获取Canvas内部的绘图坐标
function getCanvasDrawCoords(canvas, event) {
    const rect = canvas.getBoundingClientRect();
    // 计算缩放比例：绘图分辨率 / 显示尺寸
    const scaleX = canvas.width / rect.width;
    const scaleY = canvas.height / rect.height;
    // 转换并返回坐标
    return {
        x: Math.floor((event.clientX - rect.left) * scaleX),
        y: Math.floor((event.clientY - rect.top) * scaleY)
    };
}

// 绑定顶层Canvas的点击事件，实现两次点击画线
let startPoint = null;
topCanvas.addEventListener('click', (e) => {
    const coords = getCanvasDrawCoords(topCanvas, e);
    if (!startPoint) {
        // 第一次点击记录起点
        startPoint = coords;
        // 可选：绘制起点标记
        const ctx = topCanvas.getContext('2d');
        ctx.beginPath();
        ctx.arc(coords.x, coords.y, 3, 0, Math.PI * 2);
        ctx.fill();
    } else {
        // 第二次点击绘制线条
        const ctx = topCanvas.getContext('2d');
        ctx.beginPath();
        ctx.moveTo(startPoint.x, startPoint.y);
        ctx.lineTo(coords.x, coords.y);
        ctx.lineWidth = 2;
        ctx.strokeStyle = '#ff0000';
        ctx.stroke();
        // 重置起点
        startPoint = null;
    }
});

3. 底层Canvas的图片适配（可选） #

如果底层Canvas需要承载图片，要确保图片也适配Canvas的尺寸，避免图片拉伸或错位：

function drawBackgroundImage() {
    const ctx = bottomCanvas.getContext('2d');
    const img = new Image();
    img.src = '你的图片路径'; // 替换成你的图片URL
    img.onload = () => {
        // 适配图片到Canvas（这里用覆盖模式，也可以用contain等逻辑）
        ctx.drawImage(img, 0, 0, bottomCanvas.width, bottomCanvas.height);
    };
}

这样处理后，点击容器内的任意位置，顶层Canvas的线条都会精准绘制在点击的位置上，完全匹配视觉效果。

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