在 requestAnimationFrame 中使用 clearRect 不会显示动画

我正在尝试在HTML5画布上做一个简单的javascript动画。 现在，我的画布是分层的，因此当我收到鼠标事件时，背景层不会改变，但带有头像的顶层会四处移动。 如果我使用 requestAnimationFrame 并且不清除屏幕，我会看到我的漂亮小播放器在多个帧中移动，角色的尾巴很长。 但是，如果我尝试在每个动画帧后执行 clearRect，那么我的角色永远不会出现，我不确定是什么原因造成的。

我使用这些链接作为我的代码的基础：
http://www.html5canvastutorials.com/advanced/html5-canvas-start-and-stop-an-animation/http://paulirish.com/2011/requestanimationframe-for-smart-animating/http://www.nczonline.net/blog/2011/05/03/better-javascript-animations-with-requestanimationframe/

很多例子都是对绘制的形状进行动画处理，而我使用的是图像，不确定这是否重要，以及我是否应该只使用画布转换函数而不是clearRect，但我认为这不应该有所作为。另外，为了可读性，我删除了一堆代码，所以括号可能不掉了，但代码是有效的，我只是为了可读性而这样做，所以你会看到一个方向的动画。 我的代码看起来像这样：

// what is this function for? See here - http://stackoverflow.com/questions/10237471/please-explain-this-requestanimationframe-idiom
window.requestAnimFrame = function(callback){
// add in this parentheses - http://stackoverflow.com/questions/5605588/how-to-use-    requestanimationframe
   return ( window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function(callback){
        window.setTimeout(callback, 1000 / 60);
    }
);
}();
function stopAnimatingPlayer(currentAvatarAnimating, destinationCellX, destinationCellY) {
    gIsAnimating = false;
    //Did this final draw because I wasn't sure if the avatar would end on the exact pixel position, so this should snap him back into place
    drawAvatar(currentAvatarAnimating, destinationCellX, destinationCellY, false,0,0);
}   
function movePlayer(lastTime, playerPixelX, playerPixelY, destinationCellX, destinationCellY) {
if (gIsAnimating) {
    // the canvas is already globally held as gAvatarCanvasElement & gAvatarDrawingContext;
    // update
    var date = new Date();
    var time = date.getTime();
    var timeDiff = time - lastTime;
    var linearSpeed = 100;
    // pixels / second
    var linearDistEachFrame = linearSpeed * timeDiff / 1000;
    var horizontal = false;
    var newX, newY;
    // gets the new coordinate of the player
    if (gTowerCurrentPlayer == 1) {
        //fill in later - just trying to get one horizontal animation working
        } else if (destinationCellY == gPlayer1Cell.y) { // we're moving horizontally
    var currentX = playerPixelX;
            var diffX = destinationCellX - gPlayer1Cell.x;
            horizontal = true;
            if (diffX > 0) { // player is moving right - just get one direction going for now
                if (currentX < getPixelFromRow(destinationCellX)) {
                    newX = currentX + linearDistEachFrame;
                } else {
                    stopAnimatingPlayer(gTowerCurrentPlayer, destinationCellX, destinationCellY); 
                }
            } //fill in rest later - get one direction working
    lastTime = time;
    // clear - this is where the problem is
    gAvatarDrawingContext.clearRect(playerPixelX, playerPixelY, kPieceWidth, kPieceHeight);
    //gAvatarDrawingContext.clearRect(0,0, gAvatarCanvasElement.width, gAvatarCanvasElement.height);
    if (horizontal) {
        drawAvatar(gTowerCurrentPlayer, 0, 0, true, newX, playerPixelY);
        // request new frame
        requestAnimFrame(function(){ 
            movePlayer(lastTime, newX, playerPixelY, destinationCellX, destinationCellY);
        });
    } 
}
}
function animatePlayer(playerPixelX, playerPixelY, destinationCellX, destinationCellY) {
    gIsAnimating = true; // global var here
    var date = new Date();
    var time = date.getTime();
    movePlayer(time, playerPixelX, playerPixelY, destinationCellX, destinationCellY); 
}

如果有人可以提供任何帮助，我将不胜感激，我只是不明白为什么这不起作用。 我不需要超级华丽的动画，这就是为什么我没有使用 kineticjs 或任何其他库的原因。

谢谢。