如何用畫布創建動畫形狀的不斷循環？

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