高清屏下canvas点击偏移本质是物理像素、css像素、绘图坐标未对齐，需同步canvas.width/height与css尺寸（按dpr缩放），并校准鼠标坐标：x = (clientx - rect.left) × (canvas.width / rect.width)，同时确保ctx.scale(dpr,dpr)正确应用且不重复叠加。
高清屏下 Canvas 鼠标点击坐标偏移，本质是物理像素、CSS 像素、绘图坐标三者没对齐。排查要从“坐标输入”和“坐标使用”两端同时验证，不靠猜测，只看数值是否一致。
检查 canvas.width/height 与 CSS 尺寸是否按 DPR 同步
这是最常见根源。如果 canvas.width = 400，但 canvas.style.width = "400px"，而设备 DPR=2，浏览器会把 400 像素拉伸到 800 物理像素渲染，导致所有鼠标坐标被“压缩一半”。
- 在控制台运行：
console.log(canvas.width, getComputedStyle(canvas).width, window.devicePixelRatio) - 正确关系应为：canvas.width ≈ parseFloat(getComputedStyle(canvas).width) × DPR（同理 height）
- 若不满足，说明缩放未生效——检查 resizeCanvas 函数是否执行，是否在 DOM 挂载后调用，是否被多次覆盖
验证鼠标事件坐标是否已还原为绘图坐标系
获取的 clientX/Y 必须经过 getBoundingClientRect + DPR 缩放两步校准，才能匹配 canvas.width/height 定义的坐标范围。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 在 click/mousemove 回调中打印：
const rect = canvas.getBoundingClientRect(); const x = (e.clientX - rect.left) * (canvas.width / rect.width); console.log("绘图坐标 x:", x, "canvas.width:", canvas.width) - 正常情况下，x 应在 0～canvas.width 范围内（允许少量浮点误差）。若 x 始终只有预期值的一半（如 canvas.width=800 时 x≈400），说明缩放比漏乘了
- 注意：不要用 event.offsetX/Y，它在 transform 或缩放容器中不可靠
确认 ctx.scale() 是否已应用且未重复叠加
ctx.scale(dpr, dpr) 是让绘图逻辑保持在“CSS 像素坐标系”的关键，但它会影响所有后续绘图操作，也影响你手动画布调试线的位置。
- 在绘图前加：
console.log(ctx.getTransform())，检查 a/d 字段是否等于 DPR 值（如 DPR=2 时 a=2） - 若多次调用 ctx.scale(2,2)，变换矩阵会变成 4×，导致绘制位置偏移加剧；应在每次重绘前用
ctx.setTransform(1, 0, 0, 1, 0, 0)重置 - 调试时可临时禁用 ctx.scale()，改用
ctx.fillRect(x * dpr, y * dpr, w * dpr, h * dpr)，看坐标是否对齐——若此时对齐，说明 scale 使用不当
排除容器级 CSS 变换干扰
对 canvas 父容器或 canvas 自身设置 transform: scale()、zoom 或 filter，会改变 getBoundingClientRect 的返回值，但不改变 canvas 内部像素布局，极易引发隐性错位。
- 运行：
console.log(getComputedStyle(canvas).transform)和console.log(getComputedStyle(canvas.parentElement).transform) - 若返回非 none 值（如 matrix(0.8,0,0,0.8,0,0)），必须手动解析缩放系数，并在校准鼠标坐标时额外除以该系数
- 更稳妥做法：移除所有容器 transform，改用 canvas 内部缩放（ctx.scale）或 viewport/meta 控制整体缩放
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
