Canvas背景无限滚动动画异常：if语句未执行致坐标持续递减

问题分析 #

你的背景滚动逻辑存在两个核心问题：

1. 参数传递丢失：requestAnimationFrame调用时未传入speed参数，后续函数调用中speed变为undefined，导致x和x2计算为NaN，无法正常绘制图片。
2. 重置逻辑错误：直接将x或x2硬重置为2400，破坏了两张背景图的衔接关系，当其中一张图被重置后，两张图之间出现巨大间隔，最终全部移出画布导致消失。

另外，原判断条件x < -2400不够精准，当x刚好等于-2400时，图片已完全移出画布，此时就应该触发重置。

修复后的代码 #

let x = 0;
let x2 = 2400;

function animateFullBackground(speed: number) {
    clear();
    for (let layer of background) {
        ctx.drawImage(layer, x, 0);
        ctx.drawImage(layer, x2, 0);
        
        // 用图片实际宽度代替硬编码值，提升灵活性
        const bgWidth = layer.width;
        // 修正重置逻辑：保持两张图的衔接关系
        if (x <= -bgWidth) {
            x = x2 + bgWidth;
        }
        if (x2 <= -bgWidth) {
            x2 = x + bgWidth;
        }
    }

    x -= speed;
    x2 -= speed;

    // 传递speed参数给下一次动画帧
    requestAnimationFrame(() => animateFullBackground(speed));
}

function clear() {
    ctx.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);    
}

clear();
animateFullBackground(1);

关键修复点说明 #

• 参数传递：用箭头函数包裹animateFullBackground调用，确保每次动画帧都传入正确的speed值。
• 重置逻辑：重置时基于另一张图的位置计算新坐标，保证两张图始终相邻（间隔为图片宽度），避免出现空白间隔。
• 动态宽度：使用layer.width获取背景图实际宽度，代替硬编码的2400，适配不同尺寸的背景图。

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