画布动画 - 基础知识

Question

我尝试创建一个简单的动画，以便渐变块逐渐填充整个框。

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

请让我知道您认为错误可能是什么因为我无法理解。我是动画的新手，但现在得到它的要点，所以我不认为这是一个逻辑错误。

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

由于

Answer 1

你有一个错字：

那是什么？

这是正确的：http://jsbin.com/qobiyadi/2/edit