Question

您好我正在尝试创建一个从画布一侧生长的矩形，直到它填满整个画布，一旦它完成缩小回到原始状态，我正在采用的方法是使用requestAnimationFrame / cancelAnimationFrame由于某种原因，我不确定cancelAnimationFrame似乎不起作用我的代码是以下一个：

<script>

  function grRectangle(){

                    var canvas = document.getElementById("paper");
                    var context= canvas.getContext("2d");
                    //var forpi = Math.PI * 2;

                  //context.fillStyle = "black";
                  context.fillRect(0,0,canvas.width,canvas.height);
                  var posX = 200;
                  var posY = 100;
                  var color = 0;

                  function draw(){

                  context.fillStyle = 'hsl('+  color++ + ',100%,50%)';
                  context.beginPath();
                  context.rect(0,0,posX,posY);
                  context.fill();

                  posX = posX +  0.9;
                  posY = posY + 0.9;
                  if(posX < canvas.width ){

                   requestAnimationFrame(draw);
                  }  if (posX >= canvas.width){
                     posX = posX -  0.9;
                   posY = posY - 0.9;
                    cancelAnimationFrame(draw);

                  }     


    }

  draw();

  };


</script>

<body  onload= "grRectangle();" >
  <h1>Growing Rectangle</h1>
  <canvas id = "paper" width="800" height="600">


  </canvas>

任何帮助都是值得赞赏的

Answer 1

在我看来，你编写的代码实际上并不需要cancelAnimationFrame。我不确定你认为它到底是什么，但似乎你误解了它。

cancelAnimationFrame方法用于防止先前对requestAnimationFrame的调用被执行，只要这还没有发生。在极少数情况下你需要这个。

在你的情况下，我会将0.9的每帧增长常量放入变量中。当矩形大小达到上限时，只需将其更改为-0.9，它将再次变小。当它到达下限时，再次将其更改为0.9，它将再次增长。

但是，你不会看到缩小，因为你没有删除你的画布。每个框架都绘制在前一个框架的顶部。您必须在绘图循环开始时擦除画布。为此，将填充画布的代码用黑色矩形移动到绘图循环中（记住将填充样式设置为黑色）。

用于Javascript上的动画的cancelAnimationFrame

1 个答案: