Canvas在高清屏上鼠标点不准的根本原因是坐标未对齐物理像素，需通过devicePixelRatio（DPR）将clientX/Y转换为canvas内部像素坐标，并同步缩放canvas缓冲区与绘图上下文。
Canvas 在高清屏上鼠标点不准，根本原因不是事件监听错了，而是坐标没对齐物理像素。devicePixelRatio（DPR）是关键桥梁——它告诉你 1 个 CSS 像素实际占几个物理像素，必须用它把鼠标位置还原到 canvas 的真实绘图坐标系里。
先校准鼠标位置：从 clientX/Y 到 canvas 像素坐标
直接用 event.clientX 和 event.clientY 是错的，它们返回的是 CSS 像素值，没考虑缩放、边框、滚动或 DPR。必须走标准三步：
- 调用
canvas.getBoundingClientRect()，拿到画布左上角在视口中的 CSS 像素位置（rect.left/rect.top） - 算出鼠标相对于画布左上角的 CSS 坐标：
x = event.clientX - rect.left，y = event.clientY - rect.top - 再按 DPR 和 CSS 尺寸比例还原为 canvas 内部像素坐标：
const dpr = window.devicePixelRatio || 1;const realX = x * (canvas.width / rect.width);const realY = y * (canvas.height / rect.height);
确保 canvas 缓冲区和绘图上下文已适配 DPR
如果 canvas 的 width 和 height 属性没按 DPR 放大，上面算出的 realX 会超出有效范围，判定必然失败。必须同步完成初始化：
- 获取父容器尺寸（如
container.getBoundingClientRect()），设 canvas 的style.width/style.height为该尺寸（单位 px） - 将 canvas 的
width和height属性设为：rect.width * dpr和rect.height * dpr - 立即对绘图上下文执行
ctx.scale(dpr, dpr)，这样后续所有绘制（如fillRect(x, y, w, h)）仍可用逻辑坐标，无需手动除以 DPR
避免常见陷阱：backingStorePixelRatio 补偿（可选但推荐）
有些浏览器（尤其是 Safari 和旧版 Chrome）内部渲染缓冲区与 DPR 不完全一致，导致坐标仍有轻微偏移。更健壮的做法是引入 backing store 补偿：
立即学习“前端免费学习笔记（深入）”；
- 定义兼容函数：
function getEffectiveRatio(ctx) {
const dpr = window.devicePixelRatio || 1;
const bsr = ctx.backingStorePixelRatio ||
ctx.webkitBackingStorePixelRatio || 1;
return dpr / bsr;} - 用这个比值替代单纯
dpr来设置canvas.width/height和缩放：ctx.scale(ratio, ratio) - 这样能覆盖多数高分屏+多浏览器组合下的微小偏差
交互判定时保持坐标系统一
做完上述步骤后，你得到的 realX / realY 就是 canvas 内部坐标系里的准确位置，可直接用于几何判定：
- 矩形检测：判断
node.x ≤ realX ≤ node.x + node.width等 - 路径检测：用
ctx.isPointInPath(realX, realY)（注意需先重绘路径，且路径未被scale干扰） - 连线命中：对折线路径做点线距离计算时，输入值也必须是
realX/realY，否则阈值失效
