Html5 Canvas初探學習筆記(14) -簡單動畫實現

之前都是簡單的靜止繪圖，本篇實現一個簡單的動畫效果，效果如下：

##就是讓人物往斜下方移動，程式碼如下：

#主要由兩個函數組成，首先當頁面載入的時候呼叫init函數，首先來看init函數，##init函數首先是幾句初始化的內容，獲得上下文等等，然後是生成圖片對象，生成圖片對象主要是如下幾句：

this.image = new Image();
this.image.src = "grossini.png";
this.image.onload = function(){
   setTimeout(update,33);
}

這個在之前提到過，主要是首先給定

src

路徑對象，然後當onload#函數被呼叫時，我們之前是繪製圖片，這裡呼叫setTimeout隔一段時間呼叫update函數，其功能就是不斷地更新畫布。 來看

update

函數，先呼叫

clearRect

清空螢幕，然後繪製圖片，然後更新主角的位置，，最後呼叫######setTimeout######讓######update######循環呼叫下去######### 以上就是Html5 ，Canvas，簡單動畫的內容，更多相關內容請關注PHP中文網（www.php.cn）！ ################