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


##就是讓人物往斜下方移動,程式碼如下:
#主要由兩個函數組成,首先當頁面載入的時候呼叫init函數,首先來看init函數,##init函數首先是幾句初始化的內容,獲得上下文等等,然後是生成圖片對象,生成圖片對象主要是如下幾句:
1 2 3 4 5 | 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)! ################