画布动画 - 基础

我已经尝试创建一个简单的动画，以便梯度块逐渐填满整个框。画布动画 - 基础

我试图通过在动画功能的中间推动一些警报，但没有得到任何弹出窗口的原始调试方法。

只是让我知道你认为错误可能是因为我无法弄清楚。我是动画的新手，但现在就掌握它的主旨，所以我不认为它是一个逻辑错误。

window.requestAnimFrame = (function(callback) { 
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || 
    function(callback) { 
     window.setTimeout(callback, 1000/60); 
    }; 
    })(); 

function drawGradient(myGrad, ctx){ 
    var grd = ctx.createLinearGradient(0,0,200,0); 
    grd.addColorStop(0,"black"); 
    grd.addColorStop(1,"grey"); 
    ctx.fillStyle=grd; 
    ctx.fillRect(0,0,myGrad.width,100); 
} 

function animate(myGrad,canvas,ctx,startTime){ 
    var time = (new Date()).getTime() - startTime; 
    var linearSpeed = 100; 
    var newX = linearSpeed * time/1000; 
    myGrad.width = newX; 

    ctx.clearRect(0,0,200, 100); 
    drawGradient(mrGrad, ctx); 

    requestAnimFrame(function(){ 
     animate(myGrad,canvas,ctx,startTime); 
    }); 
    } 

var canvas=document.getElementById("myCanvas"); 
var ctx=c.getContext("2d"); 

var myGrad = { 
    width: 0 
}; 
drawGradient(myGrad, ctx); 

setTimeout(function() { 

     var startTime = (new Date()).getTime(); 
     animate(myGrad, canvas, ctx, startTime); 
}, 1000);

感谢

来源

2014-02-17 user3012749