Canvas中多个对象的居中与均匀间距实现问题

问题根源 #

你之前的计算逻辑没考虑矩形自身宽度，直接用画布宽度除以矩形数量分配位置，导致左右边距不一致。正确思路是先算出所有矩形的总占用宽度，再把剩余空间均匀拆分到左右边距和矩形间隙里。

解决方案步骤 #

1. 计算所有矩形总宽度：总宽度 = 单个矩形宽度 × 矩形数量
2. 计算剩余可用空间：剩余空间 = 画布宽度 - 总宽度
3. 把剩余空间分成矩形数量 + 1等份——左右各1份，矩形之间各1份，确保所有间距（边距、间隙）完全相等
4. 每个矩形的x坐标 = 起始边距 + (单个矩形宽度 + 间隙) × 矩形索引

修改后的代码 #

class Box {   
  constructor(game, index){     
    this.game = game;     
    this.width = 150;     
    this.height = 75;     
    // 计算所有矩形的总宽度
    const totalBoxWidth = this.game.numberOfBoxes * this.width;
    // 计算均匀分配的间距（左右边距+矩形间隙）
    const spacing = (this.game.width - totalBoxWidth) / (this.game.numberOfBoxes + 1);
    // 计算当前矩形的左上角x坐标
    this.x = spacing + (this.width + spacing) * index;     
    this.y = this.game.height - this.height;   
  }  

  draw(context){     
    // 直接使用计算好的x坐标，无需额外加半宽
    context.fillRect(this.x, this.y, this.width, this.height); 
  } 
}

说明 #

• 构造函数参数从x改为index，传入0、1、2...对应第1、2、3个矩形即可
• 无论后续添加到3个还是5个矩形，都会自动在底部居中，且所有间距保持一致
• 如果要保留占比参数（0-1之间的数值），可以把index换成ratio，然后用this.x = spacing + (totalBoxWidth + spacing * (this.game.numberOfBoxes - 1)) * ratio计算，但用索引更直观

内容的提问来源于stack exchange，提问作者Blue_Artifact