canvas dom定位错位的根本原因是canvas.width/height属性与css尺寸不匹配，尤其在高dpi屏上；应按canvas.width=clientwidth×dpr、height同理设置，并调用ctx.scale(dpr,dpr)，叠加dom需强制gpu层且canvas设pointer-events:none以保障svg交互。
Canvas DOM定位错位是因为width/height和CSS尺寸不匹配
Canvas叠加DOM元素（比如tooltip、告警标签）出现偏移，根本不是z-index或position写错了，而是canvas.width和canvas.height没按设备像素比放大，但canvas.style.width/canvas.style.height却设了固定CSS值。结果Canvas内部坐标系塌缩，上层DOM按CSS像素定位，底层Canvas却按更小的物理像素渲染——视觉上就“错开”了。
常见表现：MacBook上文字标签总往右下偏几像素；Windows缩放125%时热力图和SVG底图对不齐。
- 必须用
canvas.getBoundingClientRect()取真实显示尺寸，别用offsetWidth——后者受父容器transform影响，不准 - 设
canvas.width = rect.width * dpr、canvas.height = rect.height * dpr，其中dpr = window.devicePixelRatio || 1 - 再用CSS把显示尺寸压回：
canvas.style.width = rect.width + "px"、canvas.style.height = rect.height + "px" - 叠加DOM必须加
transform: translateZ(0)强制GPU层，否则可能被Canvas合成层遮挡
Canvas高分屏模糊的三要素缺一不可
只改style.width、只调ctx.scale()、或只放大width/height，都会糊。模糊是浏览器拉伸位图的结果，不是抗锯齿开关能解决的。
验证是否真糊：用ctx.getImageData(0, 0, 1, 1)读左上角1×1逻辑像素区域，如果返回超过4个非透明像素（RGBA各1字节），说明已被插值拉伸。
- 第一步：获取当前
dpr，并监听window.matchMedia(`screen and (min-resolution: ${dpr}dppx)`).addEventListener('change', ...)，因为用户切显示器或调系统缩放时dpr会变 - 第二步：重设前先保存图像
const dataUrl = canvas.toDataURL()，避免清空后重绘丢内容 - 第三步：重置变换矩阵
ctx.setTransform(1, 0, 0, 1, 0, 0)再ctx.scale(dpr, dpr)，防止多次scale叠加导致坐标错乱
Canvas和SVG混排时交互失效怎么修
鼠标hover不到SVG节点，或者点击被Canvas吞掉，不是事件冒泡问题，而是pointer-events默认行为：Canvas默认捕获所有指针事件，SVG即使在它下面也会被“盖住”。
- 若Canvas纯展示（如热力图层），直接加
style="pointer-events: none"，让事件穿透到底层SVG - 若Canvas需响应交互（如拖拽），改
pointer-events: auto，再用canvas.getBoundingClientRect()手动映射event.offsetX/Y到SVG坐标系 - SVG内部路径必须显式写
pointer-events="visiblePainted"，否则fill="none"的边框无法触发事件 - 绝对禁止在SVG里用
<foreignobject></foreignobject>塞DOM——Canvas叠加后极易失焦，且Chrome中性能暴跌
html2canvas截图又糊又偏，关键在scale和滚动容器
html2canvas模糊主因是没传scale参数；偏移则多因滚动容器计算偏差——它默认以window为基准，但你的图表可能包在overflow: auto的div里。
- 必须显式传
scale: window.devicePixelRatio || 1，否则Retina屏必糊 - 存在滚动容器时，要手动传
scrollX/scrollY，或截图前把容器scrollTop = scrollLeft = 0 -
position: fixed元素要临时转absolute，用getBoundingClientRect()算出绝对偏移再设top/left - 截图前删掉
box-shadow、filter: blur()等CSS效果，改用Canvas原生API重绘，否则html2canvas会拍平成失真位图
最易被忽略的是：重设Canvas时没调ctx.setTransform()就直接scale()，导致多次缩放叠加，坐标系彻底乱掉。这不是DPR问题，是状态管理没做干净。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
