zeichnung quadrate auf leinwand in foor loop nur zeichnen ein quadrat

Question

Ich verwende das canvas-element, um weiße quadrate auf einem schwarzen leinwand hintergrund zu zeichnen.

Ich habe keine Schwierigkeiten, einen schwarzen Hintergrund zu zeichnen, und kann einen Stern zeichnen, aber ich habe Schwierigkeiten, mehr als ein weißes Quadrat zu zeichnen. Ich bin verwirrt, da ich auf jeder Schleife einen neuen weißen Stern zeichne, aber aus irgendeinem Grund zeichnet er nicht jeden Stern (weißes Quadrat).

Based on this article I believe my code should work.

Bitte siehe Code unten:

function Starfield() { 
    this.ctx = document.getElementById('canvas'); 
    this.ctx = this.ctx.getContext("2d"); 
    this.stars = 2; 
    this.createCanvas(); 
    this.createStar(); 
} 

Starfield.prototype.createCanvas = function() { 
    this.ctx.fillStyle = "#000"; 
    this.ctx.fillRect(0,0, window.innerHeight, window.innerWidth); 
}; 

Starfield.prototype.createStar = function() { 
    var rand1 = Math.random() * 50; 
    var rand2 = Math.random() * 50; 
    for (var i = 0; i < this.stars; i++) { 
     this.ctx.fillStyle = "#fff"; 
     this.ctx.fillRect(rand1, rand2, 2, 2); 
    }; 
}; 

Answer 1

Versuchen Sie die folgenden:

Starfield.prototype.createStar = function() { 
    for (var i = 0; i < this.stars; i++) { 
     var rand1 = Math.random() * 50; 
     var rand2 = Math.random() * 50; 
     this.ctx.fillStyle = "#fff"; 
     this.ctx.fillRect(rand1, rand2, 2, 2); 
    }; 
}; 

zog ich die Anrufe Math.random() innerhalb der Schleife. Dein Code wählte nur einen Ort und zeichnete alle Sterne am selben Ort (übereinander). Sie benötigen für jeden Stern einen anderen zufälligen Ort.