如何在HTML Canvas中为像素块添加随机间距及随机块大小？

问题背景 #

现有Canvas代码可将图像按固定blockSize分割为像素块，块间按spacing设置均匀间距。需要实现两个需求：

• 给间距加入随机性（通过variance控制波动范围），让块分布不均匀
• 给blockSize加入随机性，使部分块更大

之前直接在像素遍历循环中生成随机adjustedSpacing会破坏块结构，导致块的位置错乱，需要重新设计实现逻辑。

核心思路 #

不能在每个像素计算时动态生成随机值，必须提前为每个块生成固定的随机参数，确保每个块的位置和尺寸是确定的。具体步骤：

1. 预先生成所有块的起始坐标、结束坐标（基于随机块大小和随机间距）
2. 遍历图像像素时，判断当前像素是否落在某个块的范围内，以此决定保留原像素还是置为透明

实现代码 #

const canvas = document.createElement("canvas")
const ctx = ref.current.getContext("2d")!
const imgData = ctx.getImageData(0, 0, ref.current.width, ref.current.height)
const pixels = imgData.data

const baseBlockSize = 5
const baseSpacing = 70
const spacingVariance = 50
const blockSizeVariance = 3 // 块大小的波动范围，可调整

// 存储所有块的位置信息：{ startX, startY, endX, endY }
const blocks = []

// 生成所有块的位置和尺寸
let currentY = 0
while (currentY < imgData.height) {
    const currentBlockSizeY = baseBlockSize + Math.floor(Math.random() * blockSizeVariance)
    blocks.push([])
    let currentX = 0
    while (currentX < imgData.width) {
        const currentBlockSizeX = baseBlockSize + Math.floor(Math.random() * blockSizeVariance)
        const currentSpacingX = baseSpacing + Math.floor(Math.random() * (spacingVariance * 2 + 1)) - spacingVariance
        blocks[blocks.length - 1].push({
            startX: currentX,
            startY: currentY,
            endX: currentX + currentBlockSizeX,
            endY: currentY + currentBlockSizeY
        })
        // 跳到下一个块的起始位置：当前块大小 + 随机间距
        currentX += currentBlockSizeX + currentSpacingX
    }
    const currentSpacingY = baseSpacing + Math.floor(Math.random() * (spacingVariance * 2 + 1)) - spacingVariance
    currentY += currentBlockSizeY + currentSpacingY
}

// 遍历像素，处理块显示
for (let row = 0; row < imgData.height; row++) {
    for (let col = 0; col < imgData.width; col++) {
        const i = (row * imgData.width + col) * 4
        let isInBlock = false
        // 检查当前像素是否在任意块内
        for (const rowBlocks of blocks) {
            for (const block of rowBlocks) {
                if (row >= block.startY && row < block.endY && col >= block.startX && col < block.endX) {
                    isInBlock = true
                    break
                }
            }
            if (isInBlock) break
        }
        if (isInBlock) {
            // 保留原像素
            pixels[i] = pixels[i]
            pixels[i+1] = pixels[i+1]
            pixels[i+2] = pixels[i+2]
            pixels[i+3] = pixels[i+3]
        } else {
            // 块外像素置为透明
            pixels[i] = 0
            pixels[i+1] = 0
            pixels[i+2] = 0
            pixels[i+3] = 0
        }
    }
}

ctx.putImageData(imgData, 0, 0)

关键说明 #

• spacingVariance控制间距的波动范围：用baseSpacing + 随机值（-spacingVariance 到 +spacingVariance）实现间距正负随机波动，分布更自然
• blockSizeVariance控制块大小的波动：每个块的大小在baseBlockSize到baseBlockSize + blockSizeVariance之间随机
• 预先生成块信息的方式，确保每个块的位置和尺寸固定，不会出现块结构错乱的问题

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