Canvas 画布中矩形定位失准：移动端与桌面端坐标偏移的根源与解决方案

移动端 canvas 中人脸检测框位置错位，本质是 CSS 缩放导致渲染坐标系与逻辑坐标系脱节；正确做法是通过 JavaScript 动态设置 canvas 的 width/height 属性，并重绘内容，而非依赖 CSS 样式缩放。

移动端 canvas 中人脸检测框位置错位，本质是 css 缩放导致渲染坐标系与逻辑坐标系脱节；正确做法是通过 javascript 动态设置 canvas 的 `width`/`height` 属性，并重绘内容，而非依赖 css 样式缩放。

在基于 WebRTC 与 tensorflow.js 等库实现的人脸检测应用中，开发者常通过 canvas.style.width 和 canvas.style.height（CSS）控制画布显示尺寸，同时用 ctx.rect() 绘制检测框。这种做法在桌面端看似正常，但在移动端（尤其是竖屏模式）极易引发矩形位置严重偏移——即使已对预测坐标做了 scaleX/scaleY 缩放，框体仍“漂移”或“变形”。

根本原因在于：
Canvas 是一个位图渲染表面，其实际绘制分辨率由 canvas.width 和 canvas.height 两个HTML 属性决定（单位：CSS 像素）；而 canvas.style.width/style.height 仅控制其在页面中的显示尺寸（即 CSS 像素）。当二者不一致时，浏览器会对整个 元素进行 CSS 缩放（类似 transform: scale()），导致所有 2D Context 绘制操作（包括 rect()、strokeRect()、drawImage()）被二次拉伸或压缩，使逻辑坐标与视觉坐标彻底失配。

例如：

<canvas id="detectionCanvas" width="640" height="480"></canvas>

/* ❌ 错误：触发 CSS 缩放 */ #detectionCanvas {   width: 100%;    height: auto; }

此时若视口宽度为 375px（iphone 竖屏），canvas 将被 CSS 拉伸至 375×281px 显示，但底层仍是 640×480 像素缓冲区 —— 所有 ctx.rect(x, y, w, h) 都按 640×480 坐标系计算，再被强制缩放到 375×281 区域，造成比例失真与定位漂移。

✅ 正确解法：动态同步 canvas 属性与显示尺寸

1. 移除所有影响 canvas 尺寸的 CSS 缩放规则（如 width/height/transform/max-width）；
2. 用 JavaScript 实时读取目标显示区域尺寸，并赋值给 canvas.width/height；
3. 每次尺寸变更后，立即清空并重绘全部内容（含视频帧与检测框）。

示例实现：

const canvas = document.getElementById('detectionCanvas'); const ctx = canvas.getContext('2d');  function resizeCanvas() {   const displayWidth = canvas.clientWidth;  // 获取 CSS 计算后的显示宽度（不含边框/内边距）   const displayHeight = canvas.clientHeight;    // ✅ 关键：直接设置 canvas 内部缓冲区尺寸   if (canvas.width !== displayWidth || canvas.height !== displayHeight) {     canvas.width = displayWidth;     canvas.height = displayHeight;      // ⚠️ 必须重绘：缩放后原内容已失效     redrawAll(); // 包含 drawVideoFrame() + drawFaceRects(predictions)   } }  // 监听窗口和 canvas 尺寸变化（支持响应式及旋转） window.addEventListener('resize', resizeCanvas); // 可选：监听 orientationchange 或使用 ResizeObserver 提升精度 new ResizeObserver(resizeCanvas).observe(canvas);  function drawFaceRects(predictions) {   ctx.strokeStyle = '#00ff00';   ctx.lineWidth = 3;   ctx.beginPath();    predictions.forEach(pred => {     // ✅ 此时 canvas.width/height 已与显示尺寸一致，无需额外缩放！     const x = pred.topLeft[0];     const y = pred.topLeft[1];     const w = pred.bottomRight[0] - pred.topLeft[0];     const h = pred.bottomRight[1] - pred.topLeft[1];      ctx.rect(x, y, w, h);   });    ctx.stroke(); }

额外注意事项：

• 若需保持视频原始宽高比（如 4:3 视频在 9:16 屏幕上居中显示），应先计算适配后的 displayWidth/displayHeight（如 Object-fit: contain 行为），再设置 canvas 属性，并调整 video 元素的 drawImage() 参数以避免拉伸；
• 移动端 safari 对 ResizeObserver 支持较晚，生产环境建议降级为 window.addEventListener(‘resize’) + setTimeout(…, 100) 防抖；
• 检测模型（如 @tensorflow-models/blazeface）输出的坐标默认基于输入图像尺寸（如 640×480），若 canvas 尺寸已同步为显示尺寸，则需确保模型输入预处理与 canvas 输出尺寸一致，或在推理后做一次统一归一化映射。

总结：Canvas 的“真实分辨率”永远由 width/height 属性定义，CSS 仅负责“如何展示它”。坚持“JS 控制尺寸 + JS 重绘”范式，是保障跨设备坐标一致性的唯一可靠路径。