gpt4 book ai didi

javascript - 使用 SetInterval 在 Javascript Canvas 上刷新游戏出现故障/闪烁

转载 作者:行者123 更新时间:2023-12-03 03:04:58 26 4
gpt4 key购买 nike

需要有关 Canvas 刷新的帮助,非常故障和闪烁,我正在使用 setInterval。不知道如何使用 requestanimation 框架,任何帮助都很棒

//启动整个游戏

function fullLoader() {     

setInterval(drawPoke, fps);
setInterval(drawHaunt, fps);
setInterval(drawChar, fps);
setInterval(drawDusk, fps);
setInterval(refresh, 1000/30);
}

function refresh() {

con.clearRect(0, 0, canvas.width, canvas.height)
}

该函数是绘图或png图像,并设置以fps的间隔重新加载,该间隔设置为30。

最佳答案

从不..永远..使用setInterval进行动画!

使用requestAnimationFrame,因为它与显示速率同步,并确保您对 DOM( Canvas )所做的更改不会移动到显示,直到显示硬件位于帧之间。

function fullLoader() {     
requestAnimationFrame(mainLoop); // get first frame
}

// This mainLoop is called every 1/60th second (if you return in under 1/60th second
// if the render time is loonger than 1/60 then you will have to use
// time to keep the speed at 1/30th second. Search SO for how.
function mainLoop(time){ // time is given by browser, in ms 1/1000
// accurate to 1/1,000,000
refresh();
drawPoke();
drawHaunt();
drawChar()
drawDusk();
requestAnimationFrame(mainLoop); // get next frame
}

function refresh() {
con.clearRect(0, 0, canvas.width, canvas.height);
}

关于javascript - 使用 SetInterval 在 Javascript Canvas 上刷新游戏出现故障/闪烁,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47213075/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com