canvas视差滚动需分层绘制多张无缝图像，按不同speed系数更新各层offsetx，用drawimage平铺实现循环滚动，并通过requestanimationframe优化性能。
在HTML5中用Canvas实现视差滚动背景，核心是让多层图像以不同速度沿滚动方向位移，营造远近景深感。关键不在于监听scroll事件重绘整个页面，而是主动控制Canvas内各图层的绘制偏移量，结合requestAnimationFrame保持60fps流畅动画。
分层设计与素材准备
视差效果依赖至少两层（前景+背景），理想为3层以上：云层（最慢）、山峦（中速）、近处树林（较快）。所有图层图像需横向无缝拼接（宽度≥屏幕宽×2），确保平滑循环滚动。
- 每层定义独立的
speed系数（如0.1、0.4、0.8），数值越小移动越慢 - 图层图像用
Image对象预加载，避免Canvas绘制时空白闪动 - 记录每层当前水平偏移
offsetX，每次动画帧按offsetX += speed * delta更新
Canvas绘制逻辑（单画布多层）
不创建多个Canvas，而是在同一Canvas上按从远到近顺序逐层绘制，利用drawImage()的重复平铺技巧实现无限滚动：
- 对每层计算实际绘制起始X：若
offsetX = 120，图层宽width=800，则先画x = -120位置，再画x = 680（即-120 + 800）位置，覆盖整个画布宽度 - 使用
ctx.save()/ctx.restore()隔离各层缩放或透明度设置 - 避免清空整Canvas（
clearRect），改用fillRect(0,0,w,h)填纯色底，减少闪烁
性能优化要点
视差Canvas易因频繁重绘导致掉帧，需针对性处理：
- 将
offsetX对图层宽度取模：offsetX %= width，防止数值过大影响精度 - 仅当窗口尺寸变化时重新计算Canvas的
width/height，并调用canvas.width = w; canvas.height = h重置缓冲区 - 添加节流：若用户快速滚动，用
Math.min(delta, 16)限制单帧最大位移，避免跳跃感
响应式与交互增强
基础视差可扩展为鼠标跟随或触摸拖拽式动态视差：
- 监听
mousemove，将鼠标X/Y坐标映射为各层offsetX/offsetY的微调量（如±5px），叠加到原有偏移上 - 移动端监听
touchmove，用event.touches[0]获取坐标，注意阻止默认行为防页面滚动干扰 - 添加淡入动画：初始时各层
globalAlpha从0渐变到1，避免突兀出现
Canvas视差本质是视觉欺骗，重点在分层节奏感和绘制效率。只要图层速度梯度合理、偏移计算稳定、绘制不触发重排，就能在中低端设备上跑出流畅效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
