希望你能幫助我。我是使用AnimationFrames的新手（開始使用是為了滿足業務需求）。我已經成功地制作了一個隨著你的滾動而變化的影片（通過非常有用的代碼），但我遇到的問題是，它只是添加了一個新的圖片，而把以前的圖片留在后面，留下了一個痕跡。(可以在這里看到。https://aimtechnologies.com/scrolltest/index）。) 我知道有 CancelAnimationRequest，但我不知道該把它放在哪里來解決我的問題？
代碼見下文：
const canvas = document. getElementById("hero-lightpass")。
const context = canvas.getContext("2d")。
const frameCount = 148;
const currentFrame = index => (
`images/1 & 2 Intro & Exploded View_${index.toString().padStart(5, '0)}.png`
)
const preloadImages = (/span>) => {
for (let i = 1; i < frameCount; i ) {
const img = new Image() 。
img.src = currentFrame（i）。
}
};
const img = new Image()
img.src = currentFrame（1）。
canvas.width=1158。
canvas.height=770。
img.onload=function（）{
context.drawImage（img, 0, 0）。
}
const updateImage = index => {
img.src = currentFrame（index）。
context.drawImage（img, 0, 0）。
}
window.addEventListener('roll', () => {
const scrollTop = html.scrollTop;
const maxScrollTop = html.scrollHeight - window.innerHeight;
const scrollFraction = scrollTop / maxScrollTop;
const frameIndex = Math.min(
frameCount - 1,
Math.ceil(scrollFraction * frameCount)
);
requestAnimationFrame(() => updateImage( frameIndex 1)
});
preloadImages()````。
uj5u.com熱心網友回復：
試試這個。context.clearRect(0, 0, canvas.width, canvas.height);就在你呼叫drawImage之前
uj5u.com熱心網友回復：
解決了。使用JPG而不是PNG
或者，如果你需要使用PNG，請改變
。 context.drawImage（img, 0, 0）。
}
``` to `/span>``img.onload=function（）{
context.clearRect(0, 0, canvas.width, canvas.height) 。
context.drawImage（img, 0, 0）。
}````。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/319376.html
標籤：
上一篇：如何修復腳本，使我能夠將唯一的范圍復制到另一個標簽，并避免復制列的標題？
下一篇：影片寫作html、css