移动端 Canvas 绘制的检测框位置错位，根本原因在于用 CSS 缩放 Canvas 导致坐标系失真；正确做法是通过 JavaScript 动态设置 canvas 元素的 width/height 属性，并重绘内容。
移动端 canvas 绘制的检测框位置错位，根本原因在于用 css 缩放 canvas 导致坐标系失真；正确做法是通过 javascript 动态设置 canvas 元素的 `width`/`height` 属性，并重绘内容。
在基于 WebRTC 与 TensorFlow.js 等库实现人脸检测的 Web 应用中，开发者常通过 <canvas> 叠加矩形框（如 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) 统一处理高清屏，即可彻底解决移动端矩形定位漂移问题，实现跨设备精准对齐。
