如何用画布创建动画形状的不断循环？

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(); 
    } 
}