移动端Canvas模糊卡顿的根源是尺寸错配、像素计算错误和全屏重绘；需按DPR设置物理宽高并缩放坐标系，分层绘制、局部更新、禁用抗锯齿、用rAF驱动并降级兜底。
移动端高清屏下 Canvas 渲染模糊、卡顿，核心问题不在“画得不够快”，而在于“画错了尺寸、算错了像素、重绘了整屏”。优化不是堆参数，而是理清设备像素比（DPR）、逻辑分辨率、CSS显示三者的关系，并按需控制绘制行为。
正确设置 Canvas 物理尺寸与缩放坐标系
这是解决模糊和性能双问题的第一步。不能只靠 CSS 缩放，必须让 Canvas 的 width/height 属性匹配设备物理像素：
- 用
getBoundingClientRect()获取 Canvas 在页面中的显示宽高（CSS 像素） - 乘以
window.devicePixelRatio得到真实缓冲区尺寸，赋给canvas.width和canvas.height - 用
ctx.scale(dpr, dpr)缩放绘图上下文，这样你写fillRect(10, 10, 20, 20)仍表示“逻辑上 10×10 CSS 像素区域”，但实际占满 20×20 物理像素，边缘锐利不插值 - 保持
style.width和style.height为原始 CSS 尺寸，确保布局不受影响
避免全屏重绘，精准清除与局部更新
移动端 GPU 内存和带宽有限，每帧清空整个 Canvas 再重画是最大性能陷阱之一：
- 动画中若只有小区域变化（如粒子移动、折线点更新），用
ctx.clearRect(x, y, w, h)只擦除变动区域 - 静态背景（如网格线、坐标轴）可预先绘制到离屏 Canvas，每帧仅
drawImage一次复用 - 对频繁更新的 UI 元素（如实时数据标签），单独分层：一个 Canvas 画背景，另一个 Canvas 叠在上方画文字/图标，互不干扰
适配触控交互，减少计算开销
移动端没有 hover，也不该依赖高精度坐标。模糊常源于为“凑准点”而做的冗余计算：
- 禁用不必要的抗锯齿：
ctx.imageSmoothingEnabled = false（尤其画线、像素级图形时） - 点击响应不查“精确命中”，改用距离判断：获取触摸点 x 坐标，遍历数据点横坐标，取
Math.abs(touchX - pointX)最小值对应的数据项 - 避免在
requestAnimationFrame循环里做 DOM 查询、字符串拼接、对象创建；把坐标映射、格式化等预处理提到动画外
用 requestAnimationFrame 驱动，配合帧率兜底
移动端刷新率不固定（常见 60Hz / 90Hz / 120Hz），setInterval 容易掉帧或超频：
- 动画主循环必须用
requestAnimationFrame，它由系统调度，天然对齐屏幕刷新 - 对低性能机型（如低端安卓机），可在 rAF 回调中检查上一帧耗时，若持续 >16ms，主动降级：减少粒子数量、跳过次要动画、降低绘制频率（如每两帧更新一次）
- 不要在 rAF 中触发 layout（如读 offsetWidth），否则强制同步回流，严重拖慢渲染
