在foor loop的画布上绘制正方形只绘制一个正方形

Question

我使用画布元素在黑色画布背景上绘制白色正方形。

我没有困难画一个黑色的背景，并可以绘制一颗星，但是我有困难绘制多个白色方块。我很困惑，因为我在每个循环中绘制一个新的白色星星，但由于某种原因，它并没有画出每颗星星（白色方块）。

Based on this article I believe my code should work.

下面请看代码：

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

尝试以下：

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

我感动的呼吁Math.random()在循环中。您的代码只选择一个位置，并在同一位置（彼此顶部）绘制所有星星。你需要为每个星星选择一个不同的随机位置。