window.requestAnimationFrame冻结浏览器窗口

Question

我正在尝试使用Canvas通过以下代码在JS中制作动画，但是window.requestAnimationFrame运行时告诉它冻结了浏览器窗口：

 const renders = function(){ //resize document.getElementById('maingame').width = window.innerWidth document.getElementById('maingame').height = window.innerHeight document.getElementById('maingame').style.width = window.innerWidth + 'px' document.getElementById('maingame').style.height = window.innerHeight + 'px' //resize gr.clearRect(0,0,2000,2000) //clears //draws main c (Isolate) gr.save() gr.translate(window.innerWidth/2,window.innerHeight/2) gr.rotate(d) gr.drawImage(main0,-(main0.width*size)/2,-(main0.height*size)/2,main0.width*size,main0.height*size) gr.restore(); camx = lerp(camx,x,0.1) camy = lerp(camy,y,0.1); gr.translate(x,y)//moves the camera gr.drawImage(img4, 90+x, 130+y,img4.width*0.2,img4.height*0.2) for(let i = 0; i < things.length; i++){ gr.drawImage(img3,things[i].x,things[i].y,img3.width*0.2,img3.height*0.2) window.requestAnimationFrame(renders); //recalls image to be drawn again asap } }; // Game Start window.requestAnimationFrame(renders) 

我正在尝试为使用HTML 5渲染游戏图形的引擎建立基础，但是我无法使其正常工作...（是的，我对Phaser有所了解），有人知道为什么它会保持冻结状态吗？

Answer 1

该请求位于错误的位置。 您只想在渲染后请求一个动画帧。

for(let i = 0; i < things.length; i++){
    gr.drawImage(img3,things[i].x,things[i].y,img3.width*0.2,img3.height*0.2)
} // move this curly brace up !!!!
window.requestAnimationFrame(renders); // for next render