1

私はキャンバスで遊んで JavaScript を学んでいます。ランダムに生成された色で四角形のグリッドを作成することができました。

各正方形の色の強度を増減させることにしましたが、結果はグリッドの小さな角だけが描画され、色は変化しません。私は何を間違っていますか？

ここにオンラインコードを貼り付け、ここにビンを貼り付けます。

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

1 に答える 1

3

コンストラクsquare()ターはこれを行います：

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

... where はColo()、とりわけ、これを行います:

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

したがって、各長方形をペイントする前に、キャンバス全体をクリアしています。

于 2013-09-24T18:34:08.913 に答える