在html5 canvas中繪制圖像動(dòng)畫效果，你需要繪制出每一幀的圖像，然后在一個(gè)極短的時(shí)間內(nèi)從一幀過渡到下一幀，形成動(dòng)畫效果。

示例

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

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()函數(shù)首先獲得對(duì)該requestAnimationFrame() 函數(shù)的引用。請(qǐng)注意，此函數(shù)在不同的瀏覽器中可能具有不同的名稱。將該變量 reqAnimFrame設(shè)置為所有這些不為null的可能函數(shù)。
其次，reqAnimFrame()調(diào)用函數(shù)，將animate()函數(shù)作為參數(shù)傳遞。因此，當(dāng)瀏覽器準(zhǔn)備繪制下一幀時(shí)，將animate()調(diào)用該函數(shù)。
第三，animate()函數(shù)調(diào)用draw()函數(shù)。draw() 上例中未顯示該功能。它應(yīng)該做的是，首先清除畫布（或需要清除的畫布數(shù)量），然后繪制動(dòng)畫的下一幀。
上例中未顯示的另一件事是，animate()應(yīng)調(diào)用一次函數(shù)以啟動(dòng)動(dòng)畫。如果沒有，requestAnimationFrame()則永遠(yuǎn)不會(huì)調(diào)用該函數(shù)，并且永遠(yuǎn)不會(huì)開始動(dòng)畫循環(huán)。
這是一個(gè)在畫布上移動(dòng)單個(gè)矩形的動(dòng)畫示例:

<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>