首頁  >  文章  >  web前端  >  Html5 Canvas初探學習筆記(14) -簡單動畫實現

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

黄舟
黄舟原創
2017-02-28 16:10:141443瀏覽

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





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

#主要由兩個函數組成,首先當頁面載入的時候呼叫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)! ################
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn