移动端 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 像素）。当二者不一致时，浏览器会对整个 <canvas> 元素进行 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 属性与显示尺寸
用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。
- 移除所有影响 canvas 尺寸的 CSS 缩放规则（如 width/height/transform/max-width）；
- 用 JavaScript 实时读取目标显示区域尺寸，并赋值给 canvas.width/height；
- 每次尺寸变更后，立即清空并重绘全部内容（含视频帧与检测框）。
示例实现：
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 重绘”范式，是保障跨设备坐标一致性的唯一可靠路径。
