关键在于canvas与设备物理像素对齐、响应与用户意图同步，做到不模糊、不偏移、不卡顿：需按dpr重设canvas尺寸并缩放上下文，触摸坐标反向缩放，用touchstart替代click，监听matchmedia应对dpr动态变化。
要让高分屏移动端 H5 落地页的 Canvas 交互既清晰又跟手，关键不是“画得更细”，而是让绘制逻辑和设备物理像素对齐、让响应行为和用户意图同步。核心就三点：不模糊、不偏移、不卡顿。
确保 Canvas 在高 DPR 下始终清晰
iPhone 13 以上、安卓旗舰机普遍是 2x–3x DPR，Canvas 默认只按 CSS 像素分配缓冲区，结果就是浏览器强行拉伸模糊图。必须做两件事：
- 用
getBoundingClientRect()获取 canvas 当前显示宽高（不受缩放/transform 干扰），再乘以window.devicePixelRatio设置canvas.width和canvas.height - 用 CSS 把 canvas 的
style.width和style.height固定回原始尺寸，例如canvas.style.width = rect.width + "px" - 重设尺寸后立刻调用
ctx.clearRect(0, 0, canvas.width, canvas.height)清空旧缓冲区，避免残影
保持坐标系一致，避免交互错位
放大缓冲区后，绘图坐标会“变小”——比如你写 fillRect(10, 10, 20, 20)，实际只占不到 10 物理像素。但你不能改所有坐标值，正确做法是统一缩放上下文：
- 每次清空后、绘制前执行
ctx.scale(dpr, dpr)，这样所有 fillRect / lineTo / arc 等操作仍按 CSS 逻辑像素书写，无需重写业务逻辑 - 字体、线宽、阴影模糊等样式必须同步适配：
ctx.font = (14 * dpr) + "px sans-serif"、ctx.lineWidth = 1 * dpr - 触摸点判断（如
isPointInPath）需反向缩放：isPointInPath(touchX / dpr, touchY / dpr)
让交互响应快且稳
落地页常见点击反馈、滑动触发动画、悬停高亮等，这些不能靠 click 或 touchend 后再算——延迟明显。要从源头提速：
- 用
touchstart替代click，消除 300ms 延迟；监听时加{ passive: false }确保能preventDefault - 把交互状态（如是否悬停、是否拖拽）存在变量里，每帧在
requestAnimationFrame中读取并更新视觉，而不是在事件里直接绘图 - 高频触摸（如涂鸦、滑动菜单）建议节流到 60ms 内最多一次位置捕获，防抖+平滑插值比逐点绘制更省资源
响应设备变化，不只靠 resize
DPR 可能在 iOS 地址栏收起、横竖屏切换、系统缩放设置变更时动态变化。仅监听 resize 会漏掉很多场景：
- 用
window.matchMedia(`screen and (min-resolution: ${dpr}dppx)`)创建媒体查询对象 - 监听其
change事件，在回调中重新计算 canvas 尺寸、重置 scale、清空、重绘 - 加简单防抖（如 200ms），防止连续触发导致界面闪烁或卡顿
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
