Javascript 在foor循环中在画布上绘制正方形仅绘制一个正方形

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

我没有困难画一个黑色的背景，可以画一颗星，但我有困难画一个以上的白色正方形。我很困惑，因为我在每个环上画了一个新的白色星星，然而，出于某种原因，它并没有画每个星星（白色正方形）

请参阅下面的代码：

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

函数Starfield（）{
this.ctx=document.getElementById（'canvas'）；
this.ctx=this.ctx.getContext（“2d”）；
这1.5颗星=2；
这个.createCanvas（）；
这个.createStar（）；
}
Starfield.prototype.createCanvas=函数（）{
this.ctx.fillStyle=“#000”；
this.ctx.fillRect（0,0，window.innerHeight，window.innerWidth）；
};
Starfield.prototype.createStar=函数（）{
var rand1=Math.random（）*50；
var rand2=Math.random（）*50；
对于（var i=0；i

尝试以下方法：

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

Starfield.prototype.createStar=function（）{
对于（var i=0；i

我将调用移动到循环内部的

Math.random（）

。您的代码只选择一个位置，并在同一位置绘制所有星星（在彼此的顶部）。每个星星需要不同的随机位置。

请尝试以下方法：

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

Starfield.prototype.createStar=function（）{
对于（var i=0；i

---

我将调用移动到循环内部的

Math.random（）

。您的代码只选择一个位置，并在同一位置绘制所有星星（在彼此的顶部）。每个星星需要不同的随机位置。

当然！有道理，在同一位置画同一颗星！当我可以的时候，我会给你绿色标记！谢谢当然有道理，在同一位置画同一颗星！当我可以的时候，我会给你绿色标记！谢谢