HTML Canvas图像块随机间隔与大小调整教程：基于遮罩法的精细控制

const adjustedSpacing = Math.floor(Math.random() * variance) + spacing;
// ...
const blockRow = Math.floor(row / (blockSize + adjustedSpacing));
const blockCol = Math.floor(col / (blockSize + adjustedSpacing));
// ...

// 假设这是你的主画布，以及获取其上下文和图像数据
const canvas = document.createElement("canvas");
document.body.appendChild(canvas); // 将主画布添加到DOM中，便于查看

const ctx = canvas.getContext("2d")!;

// 为了示例完整性，我们先模拟一个图像数据
const imageWidth = 500;
const imageHeight = 300;
canvas.width = imageWidth;
canvas.height = imageHeight;

// 绘制一个示例背景和文字
ctx.fillStyle = "#3498db"; // 蓝色背景
ctx.fillRect(0, 0, imageWidth, imageHeight);
ctx.fillStyle = "#ecf0f1"; // 浅色文字
ctx.font = "bold 48px sans-serif";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText("Canvas Blocks", imageWidth / 2, imageHeight / 2 - 30);
ctx.font = "24px sans-serif";
ctx.fillText("with Random Spacing & Size", imageWidth / 2, imageHeight / 2 + 20);

// 获取原始图像的像素数据
const imgData = ctx.getImageData(0, 0, imageWidth, imageHeight);
const pixels = imgData.data;

// 定义控制参数
let baseBlockSize = 20;      // 基础块大小
let baseSpacing = 10;        // 基础块间距
let spacingVariance = 30;    // 间距随机性范围 (0到此值之间)
let blockSizeVariance = 15;  // 块大小随机性范围 (0到此值之间)

// --- 第一步：创建并绘制遮罩画布 ---
const pointMask = document.createElement("canvas");
pointMask.width = imageWidth;
pointMask.height = imageHeight;
const pointCtx = pointMask.getContext("2d")!;

// 将遮罩画布