canvas动态卷轴的核心是在画布上模拟纸张展开/收卷，通过drawimage的sx参数逐帧偏移实现“窗口滑动”，再叠加边缘卷曲、明暗遮罩和纹理抖动增强真实感。
在HTML5中用Canvas实现动态卷轴展示，核心不是“滚动页面”，而是**在画布上模拟纸张展开/收卷的视觉过程**——通过像素级控制图像裁剪区域、逐帧偏移绘制位置，并叠加透视与形变，才能做出真实感强的卷轴动画。纯CSS滚动或`scrollTo`无法达成这种物理拟真效果。
关键原理：用drawImage做“窗口滑动”
卷轴的本质是固定尺寸的“可视窗口”沿一张长图水平（或垂直）平移。Canvas中不移动图片本身，而是反复调用drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh)，让sx（源图起始横坐标）随时间递增或递减，其余参数保持不变。这样每次只截取长图的一段，再把它贴到画布固定位置，形成“展开”错觉。
- 准备一张超宽底图：比如1200px高 × 3600px宽的卷轴背景图（含留白），确保横向足够长
-
设定可视区宽度：假设画布宽800px，则每帧让
sx增加2px，就能实现匀速展开 -
边界控制：当
sx > img.width - canvas.width时停止，表示已展完
增强真实感的三个像素级技巧
仅平移太机械。加入以下操作，卷轴才像被手拉动：
-
边缘微卷曲：用
ctx.save()+ctx.transform()对最右侧几像素做轻微skewX(3deg)或局部scale(0.98, 1.02)，再putImageData()覆盖回去 -
明暗渐变遮罩：在卷轴左右边缘绘制半透明黑色矩形（
ctx.fillStyle = 'rgba(0,0,0,0.15)'），宽度随sx动态缩放，模拟纸张厚度带来的阴影 -
纹理抖动：每帧用
getImageData()读取右边缘10px区域，遍历data数组，对每个像素的R/G/B值±2随机扰动，再putImageData()写回——模拟纸质纤维的细微不平整
性能优化要点
高频读写像素很耗资源，必须精简：
-
只处理变化区：卷轴静止时完全不调用
getImageData；仅在sx变化的帧里，只读取需变形的边缘窄条（如右端5px×canvas.height） -
复用ImageData对象：提前用
ctx.createImageData(w, h)创建缓冲区，避免每帧新建对象触发GC -
降频更新：用
requestAnimationFrame但内部加计数器，每3帧才执行一次像素扰动，肉眼无感却大幅减负
基础代码骨架
无需第三方库，以下结构可直接运行：
const canvas = document.getElementById('scrollCanvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.src = 'scroll-bg.jpg';
img.onload = () => {
let sx = 0;
const speed = 1.5; // 像素/帧
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 主体绘制：每次截取canvas.width宽度的图像
ctx.drawImage(img, sx, 0, canvas.width, img.height, 0, 0, canvas.width, canvas.height);
// 【可选】添加右边缘卷曲效果（此处省略transform细节）
sx += speed;
if (sx <p>做到这一步，你已掌握Canvas卷轴的核心。后续可叠加鼠标拖拽控制<code>sx</code>、触屏滑动支持、或用Perlin噪声驱动非线性位移——所有扩展都建立在“像素级可控裁剪”这个根基之上。</p>前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
