本文详解如何通过事件监听、定时器与坐标逻辑控制，在 html5 canvas 上实现“单次点击后自动铺满整个画布”的砖块墙绘制功能，并保留每块砖随机变色的视觉效果。
本文详解如何通过事件监听、定时器与坐标逻辑控制，在 html5 canvas 上实现“单次点击后自动铺满整个画布”的砖块墙绘制功能，并保留每块砖随机变色的视觉效果。
在 Canvas 中实现“点击一次，自动生成覆盖全画布的砖墙”，关键在于解耦状态更新与渲染逻辑：原代码中 addBrick 函数既负责计算位置又直接绘制，且变量 x/y 在闭包中被反复修改却未持久化，导致砖块始终重叠绘制在同一位置。正确做法是将“砖块生成进度”（数量）与“颜色刷新”分离，用独立计数器驱动逐块铺设。
Canvas 内容工厂（网格生成→多页 PDF→SVG 精准复刻）
下载
用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。
✅ 核心思路：双定时器协同 + 全局计数器
- intvBuildBrick：以固定间隔递增 brickCount，代表当前应绘制的砖块总数；
- intvChangeColor：定期触发重绘，根据当前 brickCount 循环绘制前 N 块砖；
- 每次重绘前调用 ctx.clearRect() 清空画布，避免残留叠加；
- 坐标计算采用“行优先”遍历：从起点 (x, y) 开始向右铺设，超出画布宽度则换行（x = 0; y -= brickHeight），直至 y ≤ 0（到达画布顶部）。
? 完整可运行代码（含优化说明）
const canvas = document.querySelector('#canvas');
const ctx = canvas.getContext('2d');
canvas.width = 1000;
canvas.height = 500;
let intvChangeColor, intvBuildBrick;
const brickWidth = 100;
const brickHeight = 50;
let brickCount = 0;
// 点击事件：重置计数器，启动两个定时器
canvas.addEventListener('click', (event) => {
const rect = canvas.getBoundingClientRect();
const xClick = event.clientX - rect.left;
const yClick = event.clientY - rect.top;
brickCount = 0;
clearInterval(intvChangeColor);
clearInterval(intvBuildBrick);
// 每 100ms 增加一块砖（控制铺设速度）
intvBuildBrick = setInterval(() => brickCount++, 100);
// 每 200ms 重绘一次（兼顾性能与动画流畅度）
intvChangeColor = setInterval(() => drawWall(xClick, yClick), 200);
});
function drawWall(startX, startY) {
ctx.clearRect(0, 0, canvas.width, canvas.height); // 必须清屏！
let x = startX;
let y = startY;
for (let i = 0; i < brickCount; i++) {
// 随机颜色（十六进制）
const color = '#' + Math.floor(Math.random() * 0xFFFFFF).toString(16).padStart(6, '0');
// 绘制砖块（注意：y 为负高度，表示向上生长）
ctx.fillStyle = color;
ctx.strokeStyle = 'black';
ctx.lineWidth = 1;
ctx.fillRect(x, y, brickWidth, -brickHeight);
ctx.strokeRect(x, y, brickWidth, -brickHeight);
// 更新坐标：向右 → 换行 → 判定终止
if (x + brickWidth > canvas.width) {
x = 0;
y -= brickHeight;
if (y <= 0) {
clearInterval(intvBuildBrick);
break;
}
} else {
x += brickWidth;
}
}
}⚠️ 关键注意事项
- 坐标校准务必使用 getBoundingClientRect()：替代易出错的 offsetLeft/Top，兼容缩放与滚动；
- clearRect() 不可省略：否则砖块会因重绘叠加而模糊或闪烁；
- 颜色生成需 padStart(6, '0')：防止 Math.random() 生成短于 6 位的十六进制色值（如 #ff0 → #00ff00）；
- 终止条件严格判断 y <= 0：确保最后一行砖块不超出画布顶部；
- 若需从左下角开始铺满，初始 startY 应设为 canvas.height（而非点击 Y 坐标），并移除 yClick 参数。
? 总结
该方案摒弃了“单次点击触发无限循环绘制”的脆弱设计，转而采用声明式进度控制 + 命令式重绘，既保证逻辑清晰、易于调试，又支持灵活调节铺设节奏与视觉反馈。掌握此模式后，可轻松扩展为网格填充、路径动画或粒子系统等更复杂场景。
