-1

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

任何帮助都将不胜感激

4

1 回答 1

3

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

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

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

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

于 2013-10-28T12:52:09.130 回答