滚动Canvas图片动画最后一帧无法显示问题求助

核心问题原因 #

1. 图片预加载不完整：preloadImages函数的循环条件是i < frameCount，而总帧数为750，这意味着只加载了第1到749张图片，最后一张（第750张）并未被预加载。
2. 滚动帧索引计算逻辑偏差：滚动时的帧索引计算会尝试访问未加载的图片，同时存在索引越界风险。

具体修复步骤 #

1. 修复图片预加载循环 #

修改preloadImages中的循环条件，确保加载所有750张图片：

const preloadImages = () => {
    const images = [];
    // 将 i < frameCount 改为 i <= frameCount
    for (let i = 1; i <= frameCount; i++) {
        const img = new Image();
        img.src = currentFrame(i);
        images.push(img);
    }
    return images;
};

2. 调整滚动时的帧索引计算逻辑 #

原计算方式在滚动到底部时会产生超出有效范围的索引，修改为更精准的映射逻辑，确保滚动进度与帧索引完全匹配：

window.addEventListener('scroll', () => {
    const scrollTop = html.scrollTop;
    const maxScrollTop = html.scrollHeight - window.innerHeight;
    // 避免maxScrollTop为0时的除以0错误
    const scrollFraction = maxScrollTop === 0 ? 0 : scrollTop / maxScrollTop;
    // 将滚动进度映射到0到frameCount-1的索引范围，确保最后一帧对应滚动到底部
    const frameIndex = Math.max(0, Math.min(frameCount - 1, Math.floor(scrollFraction * (frameCount - 1))));

    if (frameIndex + 1 !== currentFrameIndex) {
        currentFrameIndex = frameIndex + 1;
        updateImage(currentFrameIndex);
    }
});

3. 可选：添加索引边界检查（增强鲁棒性） #

在updateImage函数中添加边界检查，避免因意外情况导致的索引越界：

const updateImage = index => {
    // 确保index在有效范围内
    const validIndex = Math.max(1, Math.min(frameCount, index));
    const img = images[validIndex - 1];
    if (img) { // 确保图片存在再绘制
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.drawImage(img, 0, 0, canvas.width, canvas.height);
    }
};

首次Stack Overflow提问建议 #

• 明确环境信息：说明测试的浏览器版本、页面是否有自定义CSS影响滚动高度（比如body/html的margin/padding）。
• 提供最小可复现示例：可以简化代码到只保留核心逻辑，或者使用在线代码编辑器创建可运行的示例。
• 清晰描述预期与实际结果：比如明确说明“滚动到页面底部时，预期显示第750张图片，但实际停留在第749张”。
• 标注修改历史：说明响应式修改前是正常的，修改后出现问题，帮助定位差异点。

内容的提问来源于stack exchange，提问作者Eno Lewandowski