アニメーションシェイプの最後のループをキャンバスで作成する方法は？

Question

私は最近キャンバスを使いこなしています。私は本当に克服できないハードルを見つけました。シェイプを作成し、アニメーション化し、同じシェイプをキャンバス全体（xかyかにかかわらず）にループする方法を学びました。説明するのは難しいですが、一定の時間が経過した後、最初のものの背後に別のシェイプを生成する方法はわかりません。私はそれがかなり水平に動く四角形の格子になりたい。

形状のコードをループ全体に入れて変数に入れる方法を見つけて、特定の時間が経過した後にsetTimeout()にすべてを再生成させる方法を探したかったのですが、わかりませんそれはうまくいくでしょう。

function draw(x,y) { 
 
     // Put canvas in variable 
 
     var canvas = document.getElementById('canvas'); 
 
     // Enable drawing 
 
     var ctx = canvas.getContext('2d'); 
 
     // Start drawing 
 
    ctx.save(); 
 
    ctx.clearRect(0, 0, 550, 400); 
 

 
    for(var i = 0 ; i < 400 ; i+=10){ 
 
    ctx.fillStyle = "rgb(0, 200, 0)"; 
 
    ctx.fillRect(x, i, 5, 4); 
 
    } 
 
    ctx.restore(); 
 
    x += 0.3; 
 
    var loopTimer = setTimeout('draw('+x+', '+y+')', 0.1); 
 
    } 
 

 
    draw(0,0);

canvas { 
 
    margin-left: 200px; 
 
    width: 550px; 
 
    height: 400px; 
 
    border: 1px solid #111111; 
 
}

<canvas id="canvas"></canvas>

Answer 1

あなたがその場で新しいオブジェクトを作成できるように正方形のクラスを作成することもできます。

function squareClass() { 

    //Position 
    this.X = 0; 
    this.Y = 0; 

    //Size 
    this.width = 5; 
    this.height = 4; 

    //Color to render 
    this.color = "rgb(0, 200, 0)"; 

    //Move square 
    this.move = function() { this.X += 0.3; } 

    //Draw square 
    this.draw = function() { 

    ctx.fillStyle = this.color; 
    ctx.fillRect(this.X, this.Y, this.width, this.height); 
    } 
} 

ここで、正方形のクラスを使用して、必要なすべての四角形を作成できます。

var squareList = []; 

function createASqaure() { 

    squareList.push(new squareClass()); 
} 

createASquareクラスを呼び出すと、新しい四角形が生成されます。あなたは、単にsquareList配列をループとは、私が予想していなかったので、

function moveAndDraw() { 

    for (var i = 0; i < squareList.length; i++) { 

    squareList[i].move(); 
    squareList[i].draw(); 
    } 
}