javascript - 为什么我的 Canvas 除了 Angular 落外都是空白的？

Question

我正在通过玩 Canvas 来学习 JavaScript，我设法制作了一个随机生成的颜色的正方形网格。

我决定让每个方 block 的颜色强度增加和减少，但结果只是绘制了网格的一个小 Angular ，颜色没有改变。我做错了什么？

Online code here和 paste bin here .

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext("2d");

ctx.clearRect(0, 0, canvas.width, canvas.height);

function square(x, y) {
    this.x = x;
    this.y = y;
    this.sizex = 10;
    this.sizey = 10;
    this.Colo = Colo;

    function Colo() {
        var r = Math.floor(Math.random() * (255 - 1) + 1);
        var g = Math.floor(Math.random() * (255 - 1) + 1);
        var b = Math.floor(Math.random() * (255 - 1) + 1);
        var run = true;
        var rup, gup, bup = true;
        while (run) {

            if (rup) {
                if (r == 255) {
                    rup = false;
                } else if (r == 0) {
                    rup = true;
                }

                r += 1;
                r.toString();

            } else if (!gup) {
                r -= 1;
                r.toString();
            }

            if (gup) {
                if (g == 255) {
                    gup = false;
                } else if (g == 0) {
                    gup = true;
                }
                g += 1;
                g.toString();

            } else if (!gup) {
                g -= 1;
                g.toString();
            }

            if (bup = true) {
                if (b == 255) {
                    bup = false;
                } else if (b == 0) {
                    bup = true;
                }

                b += 1;
                b.toString();

            } else if (!gup) {
                b -= 1;
                b.toString();
            }

            ctx.clearRect(0, 0, canvas.width, canvas.height);
            var col = "rgb(" + r + "," + g + "," + b + ")";

            return col;
            window.onfocus = function () {
                rup = true;
            };
            window.onblur = function () {
                isActive = false;
            };
            console.log("Ran loop.")
        }
    }

    ctx.fillStyle = Colo();
    ctx.fillRect(this.x, this.y, this.sizex, this.sizey);
}

var squares = new Array();
var p = 0;
for (var i = 0; i < 128; i++) {
    for (var j = 0; j < 72; j++) {
        p = i + j;
        squares[p] = new square(i * 10, j * 10);
    }
}

Answer 1

您的 square() 构造函数执行此操作:

ctx.fillStyle = Colo();
ctx.fillRect(this.x, this.y, this.sizex, this.sizey);

... 其中，Colo() 执行以下操作:

ctx.clearRect(0, 0, canvas.width, canvas.height);

因此，在绘制每个矩形之前，您正在清除整个 Canvas 。