1

キャンバスと JavaScript を使い始めたばかりで、このスニペットの setTimeout が機能しない理由がわかりません。ループ内に含まれているため、最初は各フレームをトリガーすると思っていました。アニメーション機能内でも移動しようとしましたが、役に立ちませんでした。

$(document).ready(function(){
var canvas = $('#myCanvas');
var context = canvas.get(0).getContext('2d');   

var Shape = function(x1,y1,x2,y2){
    this.x1 = x1
    this.y1 = y1
    this.x2 = x2
    this.y2 = y2
}

var shapes = new Array();

shapes.push(new Shape(0,0,50,50));
shapes.push(new Shape(50,50,50,50));
shapes.push(new Shape(0,100,50,50));
shapes.push(new Shape(50,150,50,50));
shapes.push(new Shape(0,200,50,50));

function animate(){
    for (i=0;i<shapes.length;i++){
        context.clearRect(0,0,500,500);
        context.fillRect(shapes[i].x1,shapes[i].y1,shapes[i].x2,shapes[i].y2);
        setTimeout(animate, 500);
    };
};
animate();
});
4

2 に答える 2

2

あなたの に何か問題がありますanimate()。

  • setTimeoutループさせないでください。これにより、ブラウザがフリーズします。
  • for ループのコードは四角形を描画し、すぐに消去します。そのため、アニメーションが表示されません。

このようにコードを変更することを検討してください。

  var i = 0;
  function animate(){
      context.clearRect(0,0,500,500);
      context.fillRect(shapes[i].x1,shapes[i].y1,shapes[i].x2,shapes[i].y2);
      i++;
      if (i == shapes.length) i = 0;
      setTimeout(animate, 500);
  };
  animate();
于 2012-09-29T07:44:32.920 に答える
0

timeOutId を意図的に上書きしているため、 setTimeout がループで問題を引き起こします。ロジックを変更する必要があります。setTimeout をループから外します。

于 2012-09-29T09:49:26.687 に答える