之前都是簡單的靜止繪圖,本篇實現一個簡單的動畫效果,效果如下:
##就是讓人物往斜下方移動,程式碼如下:
#主要由兩個函數組成,首先當頁面載入的時候呼叫init函數,首先來看init函數,##init函數首先是幾句初始化的內容,獲得上下文等等,然後是生成圖片對象,生成圖片對象主要是如下幾句:this.image = new Image();
this.image.src = "grossini.png";
this.image.onload = function(){
setTimeout(update,33);
}
這個在之前提到過,主要是首先給定
路徑對象,然後當onload#函數被呼叫時,我們之前是繪製圖片,這裡呼叫setTimeout隔一段時間呼叫update函數,其功能就是不斷地更新畫布。 來看
update
函數,先呼叫
clearRect