如何在 HTML Canvas 中居中并均匀分布多个矩形对象-js教程-PHP中文网

如何在 HTML Canvas 中居中并均匀分布多个矩形对象

本文详解如何在 canvas 底部（或任意边缘）居中排列任意数量的等宽矩形，并确保矩形间及矩形与画布左右边界的间距完全相等，适用于游戏 ui、工具栏、按钮组等动态布局场景。

本文详解如何在 canvas 底部（或任意边缘）居中排列任意数量的等宽矩形，并确保矩形间及矩形与画布左右边界的间距完全相等，适用于游戏 ui、工具栏、按钮组等动态布局场景。

在 Canvas 中实现多个对象的视觉居中 + 均匀间距，关键在于理解“均匀分布”的数学本质：当有 n 个矩形时，它们会自然形成 n + 1 个空白间隔——即左边界到第1个矩形、第1与第2个之间、……、第n个矩形到右边界。若忽略这一点（如错误地除以 n），就会出现你遇到的问题：右侧留白明显大于左侧。

正确解法分三步：

计算总可用空白宽度：
totalGap = canvas.width − (rectWidth × numberOfBoxes)
这是所有 n + 1 个间隙可分配的总空间。
计算单个间隙宽度：
gap = totalGap / (numberOfBoxes + 1)
✅ 注意：分母必须是 +1，这是均匀对齐的核心。
逐个定位绘制：
第1个矩形的 x 起始位置为 gap（即左边界向右偏移一个间隙）；
后续每个矩形的 x 在前一个基础上增加 gap + rectWidth（间隙 + 自身宽度）。

以下是优化后的完整示例（适配底部居中，含类封装与健壮性处理）：

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

class Box {
  constructor(game, index, total, width = 150, height = 75) {
    this.game = game;
    this.width = width;
    this.height = height;
    this.y = game.height - height; // 底部对齐

    // 核心计算：n 个盒子 → n+1 个间隙
    const totalGap = game.width - width * total;
    const gap = totalGap / (total + 1);
    this.x = gap + index * (gap + width); // 第0个从 gap 开始
  }

  draw(context) {
    context.fillRect(this.x, this.y, this.width, this.height);
  }
}

// 使用示例
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const game = { width: canvas.width, height: canvas.height, numberOfBoxes: 3 };

function render() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 动态生成 Box 实例（支持 1–5 个）
  const boxes = [];
  for (let i = 0; i  box.draw(ctx));
}

// 支持实时调整（如滑块控制数量）
document.getElementById('boxCount').addEventListener('input', e => {
  game.numberOfBoxes = parseInt(e.target.value);
  render();
});

render(); // 初始渲染

<canvas id="myCanvas" width="800" height="400" style="border:1px solid #ccc;"></canvas><br><label>矩形数量：<input type="range" id="boxCount" min="1" max="5" value="3"></label>

⚠️ 注意事项：