Canvas滚动视差通过requestAnimationFrame驱动重绘，各图层按速度系数（如天空0.1、远山0.3、近树0.7、地面1.2）动态计算y坐标，禁用抗锯齿、整像素图片、缓存scrollY并取整，确保像素级精度与流畅性。
Canvas像素级位移实现滚动视差，核心是用requestAnimationFrame驱动画布重绘，配合滚动位置动态计算各图层偏移量，不依赖CSS定位或背景属性，真正达到逐像素控制精度。
用Canvas构建多层图像容器
每个图层（如天空、远山、近树、地面）单独加载为Image对象，并在Canvas上按固定顺序绘制。关键点在于：每层设置独立的位移速度和初始偏移，例如：
- 天空层：速度0.1，仅缓慢上移，营造深远感
- 远山层：速度0.3，中等节奏，增强层次过渡
- 近树层：速度0.7，明显滞后于内容滚动
- 地面层：速度1.2，略快于滚动，形成轻微“前冲”错觉
所有图层共用同一Canvas，但绘制时分别调用ctx.drawImage(img, x, y)，其中y值由当前滚动位置×对应速度实时算出。
滚动监听与位移同步机制
不能直接在scroll事件里更新Canvas——会频繁触发重绘并丢帧。正确做法是：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 用
window.addEventListener('scroll', () => { scrollY = window.scrollY }, { passive: true })缓存滚动值 - 在
requestAnimationFrame循环中读取scrollY，计算各层y坐标：y = baseY - scrollY * speed - 确保
baseY设为足够大的负值（如-500），让图层初始完全位于视口上方，随滚动逐步进入
像素对齐与性能关键控制
Canvas默认抗锯齿会导致位移模糊，影响像素级精度。需主动关闭：
-
ctx.imageSmoothingEnabled = false（禁用图片缩放插值） - 所有图层图片尺寸为整数像素，避免CSS缩放干扰
- 每次重绘前只清空必要区域：
ctx.clearRect(0, 0, canvas.width, canvas.height)，不用fillRect盖底色 - 移动端监听
resize事件，同步更新canvas.width和canvas.height属性（不只是CSS样式）
避免常见卡顿与错位问题
真机测试中最易出现两类问题：
- 滚动中画面跳变：因
scrollY读取时机不准，应统一用document.documentElement.scrollTop || window.scrollY，并加Math.round()强制取整 - iOS Safari闪屏：给
<canvas>加style="will-change: transform"，强制提升至合成层 - 首帧空白：图片加载完成后再启动动画循环，用
img.onload触发requestAnimationFrame初启
