-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 に答える