Javascript 画布动画-基础

我尝试过创建一个简单的动画，只是为了让渐变块逐渐填充整个长方体

我尝试了一个原始的调试方法，在动画功能的中间推了一些警报，但是没有弹出窗口。 让我知道你认为错误是什么，因为我想不出来。我是一个动画新手，但现在了解了它的要点，所以我不认为这是一个逻辑错误

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

谢谢你的打字错误：

那些是什么

---

这是正确的答案：

总是打字错误！我不确定你所说的“这些是什么”，比如c应该是对画布的引用，myGrad是我试图在画布中呈现的东西。