javascript - Canvas 动画 - 基础知识

Question

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

我尝试了一种原始的调试方法，在动画函数中间添加一些警报，但没有收到任何弹出窗口。

请告诉我您认为错误可能是什么，因为我无法弄清楚。我是动画新手，但现在已经了解了它的要点，所以我不认为这是一个逻辑错误。

  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