HTML Canvas图像像素块随机间距与大小控制教程

// 获取原始Canvas的引用和上下文
// const ref = { current: yourCanvasElement }; // 假设ref.current指向你的主Canvas
const pointMask = document.createElement("canvas");
pointMask.width = ref.current.width;
pointMask.height = ref.current.height;
const pointCtx = pointMask.getContext("2d")!;

// 将蒙版画布背景填充为黑色
pointCtx.fillStyle = "#000000";
pointCtx.fillRect(0, 0, pointMask.width, pointMask.height);

let blockSize = 5; // 基础块大小
let spacing = 70;  // 基础间距
let variance = 50; // 间距随机变化的范围
let seed = 12345;  // 伪随机数种子，用于functions.random

// 辅助函数：生成伪随机数（如果functions.random未定义，可替换为Math.random）
// 假设存在一个functions.random(seed)函数，用于生成可控的伪随机数
// 如果没有，可以使用 Math.random()，但每次结果会不同
const random = (s) => {
    // 这是一个简单的伪随机数生成器示例，你可以替换为更复杂的算法
    // 或者直接使用 Math.random()
    if (typeof functions === 'undefined' || typeof functions.random === 'undefined') {
        return Math.random();
    }
    return functions.random(s);
};

// 循环绘制白色方块
// 注意：x和y的递增逻辑中包含了随机间距
for (let x = spacing; x < pointMask.width; x += blockSize + spacing + (random(seed + x) * variance)) {
    for (let y = spacing; y < pointMask.height; y += blockSize + spacing + (random(seed + y) * variance)) {
        // 绘制白色方块
        pointCtx.fillStyle = "#ffffff";
        // 绘制一个以 (x, y - blockSize) 为左上角，边长为 blockSize 的正方形
        // 注意：这里假设 y 是方块的底边，如果希望 y 是顶边，可以直接使用 fillRect(x, y, blockSize, blockSize)
        pointCtx.fillRect(x, y - blockSize, blockSize, blockSize);
    }
}

const pointData = pointCtx.getImageData(0, 0, pointMask.width, pointMask.height);
const pointPixels = pointData.data; // 蒙版像素数组

// 假设 imgData 和 pixels 已经从原始Canvas获取
// const imgData = ctx.getImageData(0, 0, ref.current.width, ref.current.height);
// const pixels = imgData.data;

for (let i = 0; i < pixels.length; i += 4) {
    // 检查蒙版对应像素是否为白色 (R=255, G=255, B=255)
    if (pointPixels[i] === 255 && pointPixels[i+1] === 255 && pointPixels[i+2] === 255) {
       // 如果蒙版像素是白色，则保留原始图像像素（无需操作）
       // pixels[i] = pixels[i]; // R
       // pixels[i+1] = pixels[i+1]; // G
       // pixels[i+2] = pixels[i+2]; // B
       // pixels[i+3] = pixels[i+3]; // A
    } else {
       // 如果蒙版像素是黑色，则将原始图像像素设置为透明黑色
       pixels[i] = 0;   // R
       pixels[i+1] = 0; // G
       pixels[i+2] = 0; // B
       pixels[i+3] = 0; // A (透明)
    }
}

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

// 在第二步的循环中进行修改
let baseBlockSize = 5; // 基础块大小
let sizeVariance = 3;  // 块大小随机变化的范围

for (let x = spacing; x < pointMask.width; x += currentBlockSize + spacing + (random(seed + x) * variance)) {
    for (let y = spacing; y < pointMask.height; y += currentBlockSize + spacing + (random(seed + y) * variance)) {
        // 计算当前方块的随机大小
        const currentBlockSize = baseBlockSize + (random(seed + x + y) * sizeVariance);

        pointCtx.fillStyle = "#ffffff";
        // 使用 currentBlockSize 绘制方块
        pointCtx.fillRect(x, y - currentBlockSize, currentBlockSize, currentBlockSize);
    }
}

// 假设 ref.current 是你的主 Canvas 元素
// const ref = { current: document.getElementById('myCanvas') };
// const ctx = ref.current.getContext("2d")!;
// const imgData = ctx.getImageData(0, 0, ref.current.width, ref.current.height);
// const pixels = imgData.data; // 原始图像像素数据

// 配置参数
let baseBlockSize = 5;  // 基础块大小
let sizeVariance = 3;   // 块大小随机变化的范围 (0到sizeVariance之间)
let baseSpacing = 70;   // 基础间距
let spacingVariance = 50; // 间距随机变化的范围 (0到spacingVariance之间)
let seed = 12345;       // 伪随机数种子

// 伪随机数生成器（示例，可替换为更复杂的算法或直接使用 Math.random()）
const customRandom = (s) => {
    // 一个简单的线性同余生成器
    s = (s * 9301 + 49297) % 233280;
    return s / 233280;
};

// --- 第一步：创建并初始化蒙版画布 ---
const pointMask = document.createElement("canvas");
pointMask.width = ref.current.width;
pointMask.height = ref.current.height;
const pointCtx = pointMask.getContext("2d")!;

pointCtx.fillStyle = "#000000"; // 黑色背景
pointCtx.fillRect(0, 0, pointMask.width, pointMask.height);

// --- 第二步：在蒙