cancelAnimationFrame for Animation on Javascript

cancelAnimationFrame for Animation on Javascript

本文关键字：Javascript on Animation for cancelAnimationFrame      更新时间：2023-09-26

您好，我正在尝试创建一个从画布侧面增长的矩形，直到它填满整个画布，一旦完成收缩到原始状态，我正在采取的方法是使用 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>

任何帮助都非常感谢

在我看来

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

cancelAnimationFrame 方法用于防止执行以前对 requestAnimationFrame 的调用，只要这还没有发生。实际上很少有需要这种情况。

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

但是，您不会看到这种收缩，因为您没有擦除画布。每一帧都绘制在前一帧之上。您必须在绘图循环开始时擦除画布。为此，请将用黑色矩形填充画布的代码移动到绘图循环中（请记住将填充样式设置为黑色）。

相关文章：