在html5 canvas中繪制圖像動畫效果，你需要繪制出每一幀的圖像，然后在一個極短的時間內從一幀過渡到下一幀，形成動畫效果。

示例

要在html5畫布上繪制動畫，您需要在畫布上繪制和重新繪制動畫的幀。您需要非常快地這樣做，以使許多圖像看起來像動畫。
為使動畫獲得最佳性能，requestAnimationFrame 在window對象上使用回調函數。您可以調用此函數，并在瀏覽器準備繪制動畫的下一幀時將要調用的另一個函數作為參數傳遞。
當瀏覽器準備繪制下一幀時，通過讓瀏覽器向應用程序發出信號，瀏覽器可以為動畫啟用硬件加速，并與瀏覽器中的其他重繪活動協調幀重繪。與使用JavaScript中的setTimeout() 函數對動畫幀的繪制進行計時相比，總體體驗應該要好得多。
這是一個代碼示例:

function animate() {
    reqAnimFrame = (window.webkitRequestAnimationFrame ||
 window.mozRequestAnimationFrame ||
 window.oRequestAnimationFrame ||
 window.msRequestAnimationFrame ||
 function(callback) {
  var self = this, start, finish;
  return window.setTimeout(function() {
   start = +new Date();
   callback(start);
   finish = +new Date();
   self.timeout = 1000/60 - (finish - start);
  }, self.timeout);
 });
    reqAnimFrame(animate);
    draw();
}

animate()函數首先獲得對該requestAnimationFrame() 函數的引用。請注意，此函數在不同的瀏覽器中可能具有不同的名稱。將該變量 reqAnimFrame設置為所有這些不為null的可能函數。
其次，reqAnimFrame()調用函數，將animate()函數作為參數傳遞。因此，當瀏覽器準備繪制下一幀時，將animate()調用該函數。
第三，animate()函數調用draw()函數。draw() 上例中未顯示該功能。它應該做的是，首先清除畫布（或需要清除的畫布數量），然后繪制動畫的下一幀。
上例中未顯示的另一件事是，animate()應調用一次函數以啟動動畫。如果沒有，requestAnimationFrame()則永遠不會調用該函數，并且永遠不會開始動畫循環。
這是一個在畫布上移動單個矩形的動畫示例:

<canvas id="ex1" width="500" height="170" style="border: 1px solid #cccccc;">
HTML5 Canvas not supported
</canvas>
<script>var x =  0;
var y = 15;
var speed = 5;
function animate() {
reqAnimFrame = (window.webkitRequestAnimationFrame ||
 window.mozRequestAnimationFrame ||
 window.oRequestAnimationFrame ||
 window.msRequestAnimationFrame ||
 function(callback) {
  var self = this, self.timeout);
 });
reqAnimFrame(animate);
x += speed;
if(x <= 0 || x >= 475){
speed = -speed;
}
draw();
}
function draw() {
var canvas  = document.getElementById("ex1");
var context = canvas.getContext("2d");
context.clearRect(0, 0, 500, 170);
context.fillStyle = "#ff00ff";
context.fillRect(x, y, 25, 25);
}
animate();
</script>