課程
/前端開發
/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 回答直接繪圖也有效果，為什么要用循環？
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2015-03-30
是這樣的，畫面上我們看到的所有內容都是畫在canvas上的，為了產生星星的動畫效果，我們需要把前一幀畫的星星從canvas上擦除，再畫上下一幀。由于我們只使用了一個canvas，所以在擦除星星的同時，也把背景顏色和girl圖片同時擦除掉了，所以drawGirl需要放在loop中不斷重新畫。
當然你也可以把背景和drawGirl放在另一個canvas中，并且這2個canvas正好以正確的順序疊在一起，這樣背景顏色和girl圖片只需要畫一次就好了。
但我們做的這個小實踐對渲染的壓力不是很大，所以在一個canvas中畫就可以了。
不過你會提出疑問是很值得鼓勵的。
2016-09-06
為什么繪制圖片和背景也必須放在gameLoop里面呢？我移到init（）里面執行就出錯。
function?gameLoop()?{ window.requestAnimFrame(gameLoop);??? var?now?=?Date.now(); deltaTime?=?now?-?lastTime;??? lastTime?=?now; fillCanvas();??//?? drawGirl();??//?? drawStars(); aliveUpdate(); }