课程
/前端开发
/HTML/CSS
/canvas实现星星闪烁特效
背景图只要画一次就好了呀。。。
2015-03-27
源自：canvas实现星星闪烁特效 2-3
正在回答
是这样的，画面上我们看到的所有内容都是画在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(); }
x兔子 提问者
举报
使用HTML5实现轮播图片上的序列帧，进行拆分讲解，逐步实现目标
1 回答main.js文件里面为什么我把fillCanvas(); drawGirl();这两个方法写到gameloop方法外面，init方法里面就没有运动效果呢
1 回答为什么要用function init（）？？
1 回答为什么把aliveUpdate里更新的内容在update内效果就不好呢？
1 回答在创建starsObj类时，this.x与this.y有什么意义？在init中还不是一样要用到，那么在Inti中可以写出来不行吗？？
1 回答直接绘图也有效果，为什么要用循环？
