要在HTML5画布上绘制动画，我们需要在画布上绘制和重新绘制动画的帧。我们需要非常快速地执行操作，以使许多图像看起来像动画。

为了使动画获得最佳性能，应在" window"对象上使用" requestAnimationFrame"回调函数。我们可以调用此函数，并在浏览器准备绘制动画的下一帧时将要调用的另一个函数作为参数传递。

当浏览器准备绘制下一帧时，通过让浏览器向应用程序发出信号，浏览器可以为动画启用硬件加速，并与浏览器中的其他重绘活动协调帧重绘。与使用JavaScript中的setTimeout()函数对动画帧的绘制进行计时相比，总体体验应该要好得多。

这是一个代码示例：

function animate() {

    reqAnimFrame = window.mozRequestAnimationFrame    ||
                   window.webkitRequestAnimationFrame ||
                   window.msRequestAnimationFrame     ||
                   window.oRequestAnimationFrame
                   ;

    reqAnimFrame(animate);

    draw();
}

这个" animate()"函数首先获得对" requestAnimationFrame()"函数的引用。请注意，此功能在不同的浏览器中可能具有不同的名称。变量reqAnimFrame设置为所有这些不为null的可能函数。

其次，调用reqAnimFrame()函数，并将animate()函数作为参数传递。因此，当浏览器准备绘制下一帧时，将调用" animate()"函数。

第三，" animate()"函数调用" draw()"函数。上例中未显示" draw()"函数。它应该做的是，首先清除画布(或者需要清除的画布数量)，然后绘制动画的下一帧。

上面的示例中未显示的另一件事是，应调用一次" animate()"函数以启动动画。如果不是，则不会调用requestAnimationFrame()函数，也不会启动动画循环。

这是创建它的代码：

var x =  0;
var y = 15;
var speed = 5;

function animate() {

    reqAnimFrame = window.mozRequestAnimationFrame    ||
                window.webkitRequestAnimationFrame ||
                window.msRequestAnimationFrame     ||
                window.oRequestAnimationFrame
                ;

    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();