如何用 Canvas 实现点击生成完整砖墙的动画效果-html教程-PHP中文网

如何用 Canvas 实现点击生成完整砖墙的动画效果

本文详解如何通过事件监听、定时器与坐标逻辑控制，在 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  canvas.width) {
      x = 0;
      y -= brickHeight;
      if (y <h3>⚠️ 关键注意事项</h3>