這個範例採用非正統的懶人動畫寫法，因為小弟數學奇爛，所以沒有套用數學公式，直接變換 x ,y 的值來達到動畫的效果
先來看一下成果
1. 首先宣告 html5 canvas , 如附圖第8行~第9行，然後準備三張圖片，兩張做為連續播放使用(PNG photo file)，一張做為背景圖片，第19行到第26行宣告 canvas 及 繪出背景圖片
2. 接著撰寫圖片切換 function ,
設定 timer , 每200 ms 切換一次圖片
第36～43行，設定一個變數 flag , 當 flag = 1 時，播放圖片1，
當 flag = 2 時，播放圖片2 ,
第44～47行，繪製圖片及背景圖，請設定 canvas 的 source-atop , 讓切換的圖片及背景圖能同時出現
第50～64行，依自己的需求撰寫圖片移動路徑，即切換 x , y
3. 第79～84行，增加一個event listener , 當滑鼠按下時，可以觸發想要做的動作，這邊我們做變更圖片的動作
第68～76行，繪製要變更的圖
