如何用递归函数填充Canvas空白区域？栈溢出问题求助

你遇到的Maximum call stack size exceeded问题，本质是递归深度超过了浏览器的调用栈上限，再加上原代码里存在大量重复递归调用，直接把栈撑爆了。

问题根源 #

• 递归深度超限：浏览器的调用栈有固定上限（一般几千到几万），当填充的区域比较大时，递归深度会超过这个限制，直接触发栈溢出。
• 重复无意义调用：比如当前像素(x,y)调用(x+1,y)，而(x+1,y)又会反过来调用(x,y)，这种来回调用会生成大量无效栈帧，进一步加剧栈的消耗。
• 性能拖累：getImageData本身是低性能API，你在递归里每次都调用它，不仅慢，还会让栈的压力更大。

靠谱的修复方案：用迭代代替递归 #

把递归改成迭代，用栈（深度优先）或者队列（广度优先）管理要填充的像素，完全绕开调用栈的限制，同时还能优化性能。

优化后的完整代码 #

function createFillingPoint() {
  const [x, y] = points[0];
  const canvasWidth = parseInt(width.value);
  const canvasHeight = parseInt(height.value);
  // 一次性获取整个画布的像素数据，避免频繁调用getImageData
  const imageData = ctx.getImageData(0, 0, canvasWidth, canvasHeight);
  const pixelData = imageData.data;
  
  // 获取起始点的目标颜色（要替换的颜色）
  const startPixelIndex = (y * canvasWidth + x) * 4;
  const targetColor = [
    pixelData[startPixelIndex],
    pixelData[startPixelIndex + 1],
    pixelData[startPixelIndex + 2],
    pixelData[startPixelIndex + 3]
  ];
  
  // 获取要填充的颜色，转成RGBA数组
  const fillRGBA = hexToRgba(ctx.fillStyle);
  
  // 用栈存储待填充的像素坐标，模拟深度优先遍历
  const stack = [[x, y]];
  // 用Set标记已经处理过的像素，避免重复操作
  const processed = new Set();
  processed.add(`${x},${y}`);
  
  while (stack.length > 0) {
    const [currX, currY] = stack.pop();
    
    // 检查是否超出画布边界
    if (currX < 0 || currX >= canvasWidth || currY < 0 || currY >= canvasHeight) {
      continue;
    }
    
    const currIndex = (currY * canvasWidth + currX) * 4;
    // 检查当前像素是不是目标颜色，不是就跳过
    if (
      pixelData[currIndex] !== targetColor[0] ||
      pixelData[currIndex + 1] !== targetColor[1] ||
      pixelData[currIndex + 2] !== targetColor[2] ||
      pixelData[currIndex + 3] !== targetColor[3]
    ) {
      continue;
    }
    
    // 填充当前像素
    pixelData[currIndex] = fillRGBA[0];
    pixelData[currIndex + 1] = fillRGBA[1];
    pixelData[currIndex + 2] = fillRGBA[2];
    pixelData[currIndex + 3] = fillRGBA[3];
    
    // 把上下左右四个方向的像素加入栈，先检查有没有处理过
    const directions = [[1, 0], [-1, 0], [0, 1], [0, -1]];
    for (const [dx, dy] of directions) {
      const newX = currX + dx;
      const newY = currY + dy;
      const key = `${newX},${newY}`;
      if (!processed.has(key)) {
        processed.add(key);
        stack.push([newX, newY]);
      }
    }
  }
  
  // 把修改后的像素数据放回画布
  ctx.putImageData(imageData, 0, 0);
}

// 辅助函数：把十六进制颜色转成RGBA数组（支持#fff和#ffffff格式）
function hexToRgba(hex) {
  hex = hex.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, (_, r, g, b) => `#${r}${r}${g}${g}${b}${b}`);
  const match = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return match ? [
    parseInt(match[1], 16),
    parseInt(match[2], 16),
    parseInt(match[3], 16),
    255 // 默认不透明，需要透明度可以自己扩展
  ] : [0, 0, 0, 255];
}

优化细节说明 #

• 迭代替代递归：用栈管理待填充像素，完全避开浏览器的调用栈限制，多大的区域都能处理。
• 一次性获取像素数据：只调用一次getImageData，之后直接操作像素数组，比原代码频繁调用快N倍。
• 标记已处理像素：用Set记录已加入栈的像素，避免来回重复处理，减少无效操作。
• 直接操作像素数组：最后一次性用putImageData更新画布，比原代码每次调用fillRect高效太多。

内容的提问来源于stack exchange，提问作者martinfo