我正在尝试滚动画布图像动画中的其中一个，但页面底部的最后一个图像没有显示

Question

我用覆盖整个页面的 jpeg 图像制作了一个滚动动画，它在大多数情况下效果很好，但当我到达页面底部时，最后一个图像没有显示。

Chat-gpt 确实有助于使其相对响应，但这个问题是由他的响应式修改版本引起的。

这是脚本：

const html = document.documentElement;
const canvas = document.getElementById("canvas1");
const context = canvas.getContext("2d");

const frameCount = 750;
const imageBasePath = 'images/photo_animation4/';

const currentFrame = index => (
    `${imageBasePath}${index.toString().padStart(4, '0')}.jpg`
);

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

let images = preloadImages();
let currentFrameIndex = 6;
let imageLoaded = false;

const updateCanvasSize = () => {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    if (imageLoaded) {
        updateImage(currentFrameIndex);
    }
};

window.addEventListener('resize', () => {
    updateCanvasSize();
});

const firstImage = new Image();
firstImage.src = currentFrame(1);
firstImage.onload = function () {
    imageLoaded = true;
    updateCanvasSize();
};

const updateImage = index => {
    const img = images[index - 1];
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.drawImage(img, 0, 0, canvas.width, canvas.height);
};

window.addEventListener('scroll', () => {
    const scrollTop = html.scrollTop;
    const maxScrollTop = html.scrollHeight - window.innerHeight;
    const scrollFraction = scrollTop / maxScrollTop;
    const frameIndex = Math.min(
        frameCount - 1,
        Math.ceil(scrollFraction * frameCount)
    );

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

setTimeout(() => {
    updateImage(currentFrameIndex);
}, 1000);

这是我第一次寻求有关堆栈溢出的帮助，因此非常欢迎提出问题的建议。

Answer 1

在您的代码中，您排除了最后一帧（750），我假设这就是您正在谈论的......

初始化使用循环：

... let i = 1; i < frameCount ...

那个站是749

然后在您的

frameIndex

计算中您有：

... Math.min(frameCount - 1, ...

这也排除了最后一个值

---

要调试，您可以添加一些

console.log

语句或向画布添加一些调试文本
这是一个小例子，表明...
我正在用鼠标在 X 轴上的画布上移动来模拟滚动

const html = document.documentElement;
const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
context.font = "50px Arial";

const frameCount = 5
for (let i = 1; i < frameCount; i++) {
  console.log("init", i)
}

function mouseMove(evt) {
  const scrollTop = evt.clientX
  const maxScrollTop = canvas.width
  const scrollFraction = scrollTop / maxScrollTop;
  const frameIndex = Math.min(frameCount-1, Math.ceil(scrollFraction * frameCount));
  context.clearRect(0, 0, canvas.width, canvas.height)
  context.fillText(frameIndex, evt.clientX, evt.clientY);
}

canvas.addEventListener('mousemove', mouseMove);

canvas { border: solid 1px }

<canvas id="canvas">

---

我们可以使用

i <= frameCount

修复该循环，并从frameIndex 计算中删除

-1

。
请参阅下面的工作代码：

const html = document.documentElement;
const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
context.font = "50px Arial";

const frameCount = 5
for (let i = 1; i <= frameCount; i++) {
  console.log("init", i)
}

function mouseMove(evt) {
  const scrollTop = evt.clientX
  const maxScrollTop = canvas.width
  const scrollFraction = scrollTop / maxScrollTop;
  const frameIndex = Math.min(frameCount, Math.ceil(scrollFraction * frameCount));
  context.clearRect(0, 0, canvas.width, canvas.height)
  context.fillText(frameIndex, evt.clientX, evt.clientY);
}

canvas.addEventListener('mousemove', mouseMove);

canvas { border: solid 1px }

<canvas id="canvas">