canvas鼠标坐标错位本质是逻辑像素与物理像素未对齐，需先用getboundingclientrect()获取css像素坐标，再按scalex=canvas.width/rect.width、scaley=canvas.height/rect.height映射为逻辑像素坐标。

高分屏下 Canvas 鼠标交互坐标错位，本质是逻辑像素和物理像素没对齐。不是鼠标不准，而是你用的坐标没换算到当前绘图缓冲区的真实单位上。

先校准：用 getBoundingClientRect() 拿真实视口位置

别用 offsetX / offsetY，它们在缩放、transform、iframe 里行为不一致。必须走标准路径：

• 每次事件中调用 canvas.getBoundingClientRect()，它自动排除滚动、边框、缩放干扰
• 用 e.clientX - rect.left 和 e.clientY - rect.top 得到鼠标在 CSS 像素下的画布内坐标
• 这个结果是“显示坐标”，还不是绘图坐标——下一步才关键

再映射：按缩放比还原成逻辑像素坐标

Canvas 的 width/height 属性（逻辑像素）和 style.width/style.height（CSS 像素）常不等。比如 canvas.width=800，但 style.width="400px"，那横向缩放比就是 2。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 计算比例：scaleX = canvas.width / rect.width，scaleY = canvas.height / rect.height
• 最终绘图坐标：x = (e.clientX - rect.left) * scaleX，y = (e.clientY - rect.top) * scaleY
• 这个 x/y 才能直接喂给 isPointInPath()、fillRect() 或 hit-test 逻辑

高 DPR 场景下，缩放比已隐含在比例里

如果你已按 devicePixelRatio 设置了 canvas.width/height（如 DPR=2 时设 width=800 → rect.width=400），那上面的 scaleX 就自动是 2，无需额外除 DPR。DPR 的影响已被封装进 canvas.width / rect.width 这个比值里。

• 反向验证：若没做 DPR 适配（canvas.width=400，rect.width=400），那 scaleX=1，坐标自然不偏移——但图会模糊
• 所以清晰度和坐标准确必须同步处理，不能只改一边
• 触摸事件同理，用 touch.clientX 替换 e.clientX，其余流程完全一致

避免踩坑的硬性提醒

这些写法看着省事，实际在高分屏+缩放组合下必出问题：

• 不用 offsetLeft/offsetTop：受父元素定位、padding、border 影响，误差可达几十像素
• 不依赖 event.offsetX/Y：Safari 在 transform 下返回值异常，Chrome 对 zoom 不稳定
• 不手动除 DPR：除非你完全没做 canvas 缓冲区放大，否则重复除会导致坐标缩半
• 不把 rect 缓存到全局再复用：canvas 尺寸可能因 resize、orientationchange 或 matchMedia 变化，每次事件都应重新 getBoundingClientRect()

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！