HTML Canvas图像像素块随机间距与尺寸控制教程

const canvas = document.createElement("canvas"); // 假设这是原始图像所在的Canvas
const ctx = ref.current.getContext("2d")!; // 原始Canvas的上下文
const imgData = ctx.getImageData(0, 0, ref.current.width, ref.current.height);
const pixels = imgData.data; // 原始图像的像素数据

// 创建掩码Canvas
const pointMask = document.createElement("canvas");
pointMask.width = ref.current.width;
pointMask.height = ref.current.height;
const pointCtx = pointMask.getContext("2d")!;

// 将掩码Canvas背景填充为黑色
pointCtx.fillStyle = "#000000";
pointCtx.fillRect(0, 0, pointMask.width, pointMask.height);

// 定义初始参数
let blockSize = 5; // 基础块大小
let spacing = 70; // 基础间距
let varianceSpacing = 50; // 间距的随机变化范围
let varianceBlockSize = 5; // (可选) 块大小的随机变化范围
let seed = 12345; // (可选) 用于伪随机数生成的种子，确保结果可复现

// 辅助函数：生成一个伪随机数 (如果需要可复现的结果)
// 否则可以直接使用 Math.random()
function random(s) {
    // 简单的线性同余生成器示例
    s = (s * 9301 + 49297) % 233280;
    return s / 233280;
}

// 绘制白色方块掩码
// x, y 变量现在代表当前块的起始位置
for (let x = 0; x < pointMask.width; ) {
    for (let y = 0; y < pointMask.height; ) {
        // 计算当前块的随机尺寸
        // 如果不需要随机块尺寸，currentBlockSize = blockSize 即可
        const currentBlockSize = blockSize + (random(seed + x * y) * varianceBlockSize);

        // 绘制白色方块
        pointCtx.fillStyle = "#ffffff";
        pointCtx.fillRect(x, y, currentBlockSize, currentBlockSize);

        // 计算下一个块的随机间距
        const currentSpacing = spacing + (random(seed + x + y) * varianceSpacing);

        // 更新 y 坐标到下一个块的起始位置
        y += currentBlockSize + currentSpacing;
    }
    // 重置 y 坐标并更新 x 坐标到下一个块的起始位置
    // 注意：这里的 x 递增逻辑需要考虑 y 循环结束后，x 轴上的下一个块的起始位置
    // 为了简化，我们可以在外层循环结束后，重新计算 x
    // 更准确的做法是，y 循环结束后，x 也要加上当前行最大的块尺寸和间距
    // 但为了保持与原始答案的接近，这里假设 x 的递增只依赖于 x 轴上的随机性
    // 实际应用中可能需要更复杂的布局算法来避免重叠或空隙过大
    const currentSpacingX = spacing + (random(seed + x) * varianceSpacing); // 独立的x轴间距随机性
    x += blockSize + currentSpacingX; // 假设x轴的块尺寸和间距也受随机影响
    // 更严谨的x轴递增：x += currentBlockSize (of the last block in this column) + currentSpacingX;
    // 但这需要记录每列的最大块尺寸，复杂化了，这里采用简化的递增
    // 考虑到原始代码的x递增方式，我们模拟其逻辑：
    // x += blockSize + currentSpacingX;
    // 如果要考虑y循环中块尺寸对x的影响，逻辑会更复杂
    // 简化处理：假设x轴的块尺寸主要由blockSize控制，随机性体现在间距上
}
// 修正并优化掩码绘制循环
// 原始答案的循环逻辑更清晰地处理了 x 和 y 的递增，我们基于此进行优化和解释
pointCtx.fillStyle = "#ffffff"; // 设置填充颜色为白色，只设置一次

let currentX = 0;
while (currentX < pointMask.width) {
    let currentY = 0;
    while (currentY < pointMask.height) {
        // 计算当前块的随机尺寸
        const blockRandFactor = random(seed + currentX + currentY); // 使用不同种子因子
        const currentBlockSize = blockSize + (blockRandFactor * varianceBlockSize);

        // 绘制白色方块
        pointCtx.fillRect(currentX, currentY, currentBlockSize, currentBlockSize);

        // 计算下一个块的随机间距
        const spacingRandFactor = random(seed + currentX * 100 + currentY * 10); // 使用不同种子因子
        const currentSpacing = spacing + (spacingRandFactor * varianceSpacing);

        // 更新 Y 坐标到下一个块的起始位置
        currentY += currentBlockSize + currentSpacing;
    }
    // 更新 X 坐标到下一个块的起始位置
    // 注意：这里 X 轴的递增也需要考虑其自身的随机间距
    const spacingRandFactorX = random(seed + currentX * 1000); // 独立的X轴间距随机性
    const currentSpacingX = spacing + (spacingRandFactorX * varianceSpacing);
    currentX += blockSize + currentSpacingX; // 这里的 blockSize 也可以是随机的，但为了简化，暂时用基础 blockSize
}

// 获取掩码Canvas的像素数据
const pointData = pointCtx.getImageData(0, 0, pointMask.width, pointMask.height);
const pointPixels = pointData.data;

// 应用掩码
for (let i = 0; i < pixels.length; i += 4) {
    // 获取原始像素颜色
    let r = pixels[i];
    let g = pixels[i + 1];
    let b = pixels[i + 2];
    let a = pixels[i + 3];

    // 检查掩码像素是否为白色（R=255, G=255, B=255）
    if (pointPixels[i] === 255 && pointPixels[i + 1] === 255 && pointPixels[i + 2] === 255) {
        // 如果掩码像素是白色，保留原始像素
        pixels[i] = r;
        pixels[i + 1] = g;
        pixels[i + 2] = b;
        pixels[i + 3] = a;
    } else {
        // 如果掩码像素是黑色，将原始像素设置为透明（或黑色）
        pixels[i] = 0;
        pixels[i + 1] = 0;
        pixels[i + 2] = 0;
        pixels[i + 3] = 0; // 设置为透明
        // 如果设置为黑色，则为：pixels[i+3] = 255;
    }
}

// 将修改后的像素数据放回原始Canvas
ctx.putImageData(imgData, 0, 0);