Canvas 中矩形定位在移动端偏移的解决方案

移动端 canvas 绘制的检测框位置错位，根本原因在于用 CSS 缩放 canvas 导致坐标系失真；正确做法是通过 JavaScript 动态设置 canvas 元素的 width/height 属性，并重绘内容。

移动端 canvas 绘制的检测框位置错位，根本原因在于用 css 缩放 canvas 导致坐标系失真；正确做法是通过 javascript 动态设置 canvas 元素的 `width`/`height` 属性，并重绘内容。

在基于 WebRTC 与 tensorflow.js 等库实现人脸检测的 Web 应用中，开发者常通过 叠加矩形框（如 ctx.rect()）标记检测结果。虽然该方案在桌面端表现正常，但在移动端（尤其是竖屏模式）却频繁出现矩形严重偏移、缩放失真或尺寸错乱的问题——其核心症结并非算法坐标未归一化，而是 Canvas 渲染上下文与 CSS 布局之间的根本性不匹配。

❌ 错误实践：用 CSS 控制 Canvas 尺寸

许多开发者为适配响应式布局，习惯性地通过 CSS 设置 canvas 大小：

<canvas id="detectionCanvas" style="width: 100%; height: auto;"></canvas>

这会导致：

• Canvas 的内在分辨率（canvas.width/canvas.height）仍为默认值（通常 300×150），而显示尺寸被 CSS 拉伸；
• 所有 ctx.rect()、ctx.drawImage() 等绘制操作均基于原始低分辨率坐标系，再经浏览器缩放渲染，造成几何失真；
• 移动端视口缩放、设备像素比（window.devicePixelRatio）及竖屏时 viewport 宽度受限等因素会进一步放大偏差。

✅ 正确方案：JS 动态设置 canvas 内在尺寸 + 高清适配

需确保 canvas 的 width/height 属性（而非 CSS 样式）精确匹配目标显示区域，并考虑设备像素比以保障清晰度：

const canvas = document.getElementById('detectionCanvas'); const ctx = canvas.getContext('2d');  function resizeCanvas() {   const dpr = window.devicePixelRatio || 1;   const rect = canvas.getBoundingClientRect();    // 设置 canvas 内在尺寸（物理像素）   canvas.width = Math.floor(rect.width * dpr);   canvas.height = Math.floor(rect.height * dpr);    // 缩放绘图上下文，使逻辑坐标与 CSS 布局一致   ctx.scale(dpr, dpr);   ctx.clearRect(0, 0, canvas.width, canvas.height); }  // 初始化 & 监听窗口/屏幕方向变化 resizeCanvas(); window.addEventListener('resize', resizeCanvas); window.addEventListener('orientationchange', resizeCanvas);

随后，在绘制检测框时，不再对预测坐标做额外缩放（因 canvas 已按实际显示区域配置）：

// predictions 为模型返回的逻辑坐标（相对于原始视频帧） // 此处假设 predictions 已根据 video 元素实际渲染尺寸归一化或映射到 canvas 逻辑坐标系 ctx.strokeStyle = '#00ff00'; ctx.lineWidth = 2; ctx.strokeRect(   predictions.topLeft[0],      // 直接使用逻辑坐标（无需 scaleX/scaleY）   predictions.topLeft[1],   predictions.bottomRight[0] - predictions.topLeft[0],   predictions.bottomRight[1] - predictions.topLeft[1] );

⚠️ 关键提醒：

• 若检测模型输出的是相对于原始视频帧（如 640×480）的坐标，需先将其映射到当前 video 元素的实际渲染尺寸（通过 video.videoWidth/video.videoHeight 与 video.clientWidth/video.clientHeight 计算比例），再映射到 canvas 逻辑坐标；
• 每次 canvas.width/canvas.height 改变后，必须调用 clearRect() 并重新绘制全部内容（包括背景视频帧与检测框），否则残留图像将错位；
• 在 ios safari 中，orientationchange 事件可能延迟，建议结合 resize 事件并添加防抖。

通过严格分离「布局尺寸」（CSS）与「渲染分辨率」（JS 设置的 width/height），并利用 ctx.scale(dpr, dpr) 统一处理高清屏，即可彻底解决移动端矩形定位漂移问题，实现跨设备精准对齐。