為了即將要弄的iphone遊戲,實在是不得不要來理解一下html5…
雖然開頭總是一頭霧水,總之還是先把它一部分一部分的拆開來慢慢了解,為了遊戲的需求,canvas理所當然就是我的第一個目標囉～
canvas如他字面意思就是一張畫布,所以想要讓他變成像是flash一樣的動畫就得先為他加上時間軸,我是把它想像成小時候我們有時會畫在書角的小人一樣,當快速翻動時,人,就可以動起來了！
以下是實現時間軸的code:
function init(){ canvas = document.getElementById("canvas"); canvas.width = WIDTH; canvas.height = HEIGHT; canvas.addEventListener("click",ctxOnClick,false); ctx = canvas.getContext('2d'); //時間軸 setInterval(drawCanvas, 1000/FPS); } function drawCanvas(){ //sceneTime --; // console.log(sceneTime); for(i=0;i<objarr .length;i++){ objarr[i].update(); } //把canvas清空 ctx.clearRect(0, 0, WIDTH, HEIGHT); for(i=0;i<objarr.length;i++){ objarr[i].draw(); } } |
也就是說,每執行一次drawCanvas,就要把canvas清空一次,然後再從「更新過」的objarr陣列中,一一把東西再畫出來。
繼續閱讀
