填充仅 10 x 10 像素的正方形时超出最大调用堆栈大小

Question

我知道用我想要执行的方法只能填充小形状。但是我想填充一个小方块还是出现stack overflow错误
为什么会这样？
也许我对函数 color() 或 setcolor()?

有疑问

function func() {
  var canvas = document.getElementById("image");
  var context = canvas.getContext("2d");

  canvas.width = 100;
  canvas.height = 100;

  var width = 10;
  var height = 10;
  var x = 0;
  var y = 0;
  var imagedata = context.createImageData(width, height);
  var pixelindex = (y * width + x) * 4;

  function color(x, y) {
    let pixelindex = (y * width + x) * 4;
    return imagedata.data[pixelindex] + "," +
      +imagedata.data[pixelindex + 1] + "," +
      +imagedata.data[pixelindex + 2] + "," +
      +imagedata.data[pixelindex + 3];
  }

  function setcolor(x, y, cn) {
    let colors = cn.split(",");
    let pixelindex = (y * width + x) * 4;
    imagedata.data[pixelindex] = colors[0];
    imagedata.data[pixelindex + 1] = colors[1];
    imagedata.data[pixelindex + 2] = colors[2];
    imagedata.data[pixelindex + 3] = colors[3];
  }

  function fill4(x, y, cb = "27,94,32,255", cn = "67,160,71,255") {
    if (color(x, y) !== cb && color(x, y) !== cn) {
      setcolor(x, y, cn);
      fill4(x, y - 1, cb, cn);
      fill4(x, y + 1, cb, cn);
      fill4(x - 1, y, cb, cn);
      fill4(x + 1, y, cb, cn);
    }
  }

  fill4(5, 5);

  context.putImageData(imagedata, x, y);
}

<body onload="func();">
  <canvas id="image"></canvas>
</body>

Answer 1

根据我问题下的所有评论，我稍微重写了代码。最重要的是，我添加了我被告知的条件。没有这些条件，我的函数运行无限期地运行，这就是收到错误的原因。现在，通过执行代码，您可以看到使用所选颜色正确填充正方形。

    function func() {
    var canvas = document.getElementById("image");
    var context = canvas.getContext("2d");

    canvas.width = 100;
    canvas.height = 100;

    var width = 100
    var x = 0;
    var y = 0;
    var zX = 50;
    var zY = 50;
    
    var cb = [27,94,32,255];
    var cn = [67,160,71,255];

    context.strokeStyle = "black";
    context.lineWidth = 2;
    context.strokeRect(x, y, width, width);

    if (zX > x && zX < x + width && zY > y && zY < y + width) {
        fill4(zY, zY, cb, cn, context);
    }
    function fill4(zX, zY, cb, cn, content) {
        var imagedata = context.createImageData(1, 1);
        for (let i = 0; i < 4; i++) {
            imagedata.data[i] = cn[i];
        }
        var color = context.getImageData(zX, zY, 1, 1).data;
        if (zX > x && zX < x + width && zY > y && zY < y + width) {
            if (color[0] != cn[0] && color[1] != cn[1] && color[2] != cn[2] && color[3] != cn[3]) {
                context.putImageData(imagedata, zX, zY);
                setTimeout(function() {
                    fill4(zX, zY-1, cb, cn, context);
                    fill4(zX, zY+1, cb, cn, context);
                    fill4(zX-1, zY, cb, cn, context);
                    fill4(zX+1, zY, cb, cn, context);                            
                }, 20);
            }
        }
    }    
}

<body onload="func();">
  <canvas id="image"></canvas>
</body>

填充仅 10 x 10 像素的正方形时超出最大调用堆栈大小

Maximum call stack size exceeded when filling a square of only 10 by 10 pixels

javascript

canvas