在畫布元素<canvas>中，除了繪制圖形、圖像、文字外，還可以制作一些簡單的動畫，制作過程十分簡單，主要分為兩步操作：
1．自定義一個函數，用於圖形的移動或其他動作。
2．使用setInterval方法設置動畫執行的間隔時間，反復執行自定義函數。
下面通過實例介紹在<canvas>元素中制作簡單動畫的過程。
實例在畫布中制作簡單動畫
1．功能描述
在頁面中，新建一個<canvas>元素，在該畫布元素中，繪制一個卡通頭部圖形，當頁面加載時，該頭部圖形從畫布的左邊慢慢移至右邊，又從右邊移動至左邊，最后，停止在開始移動時的位置。
2．實現代碼
在Dreamweaver CS5中新建一個HTML頁面7-16.html，加入代碼如代碼清單所示。
代碼清單在畫布中制作簡單動畫。
在實例中，頁面導入一個Js文件js16.js，在該文件中，自定義多個函數，用於頁面加載過程中，制作簡單動畫的調用。其實現的代碼如代碼清單所示：
3．頁面效果
該頁面在Chrome 10瀏覽器中執行的頁面效果如圖所示：
4．源碼分析
在本實例的Js代碼中，定義了四個自定義函數，其中函數pageload()用於頁面加載時的調用，drawFace函數用於根據上下文環境對象，在畫布中繪制卡通人臉；drawCirc函數用於根據傳遞的參數值，使用fill()與stroke()方法繪制指定位置、填充色、半徑、弧度的圓形；moveFace函數用於實現往返移動圓形臉部的功能。
在drawFace函數中，四次調用drawCirc函數，分別繪制卡通人頭部的頭形、兩只眼睛與笑臉；在moveFace函數中，先根據自增量intI的值，使用translate()方法向右移動卡通人頭部，當intI值大於20時，轉為獲取intJ值，根據自減量intJ的值，使用translate()方法向左移動卡通人頭部，直到intJ值小於0，便停止移動；在自定義函數pageload()中，通過setInterval()方法，按時反復執行moveFace函數，最終在畫布中制作成簡單的動畫效果，詳細實現過程見代碼中加粗部分所示。