HTML5 Canvas 制作動畫

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

在線示例

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

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

canvas動畫實(shí)現(xiàn)的代碼如下:

<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, start, finish;
  return window.setTimeout(function() {
   start = +new Date();
   callback(start);
   finish = +new Date();
   self.timeout = 1000/60 - (finish - start);
  }, 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>