背景图只要画一次就好了呀。。。
是这样的,画面上我们看到的所有内容都是画在canvas上的,为了产生星星的动画效果,我们需要把前一帧画的星星从canvas上擦除,再画上下一帧。由于我们只使用了一个canvas,所以在擦除星星的同时,也把背景颜色和girl图片同时擦除掉了,所以drawGirl需要放在loop中不断重新画。
当然你也可以把背景和drawGirl放在另一个canvas中,并且这2个canvas正好以正确的顺序叠在一起,这样背景颜色和girl图片只需要画一次就好了。
但我们做的这个小实践对渲染的压力不是很大,所以在一个canvas中画就可以了。
不过你会提出疑问是很值得鼓励的。
为什么绘制图片和背景也必须放在gameLoop里面呢?我移到init()里面执行就出错。
function gameLoop() { window.requestAnimFrame(gameLoop); var now = Date.now(); deltaTime = now - lastTime; lastTime = now; fillCanvas(); // ? drawGirl(); // ? drawStars(); aliveUpdate(); }