Canvas对齐问题：生成居中N×N正方形区域的技术需求

我来帮你搞定这个Canvas对齐的问题！核心逻辑就是先算出整个方块区域的实际尺寸，再通过Canvas的中心偏移来定位起始点，不管你怎么改rowCount或者fieldSize，都能稳稳保持居中。

核心思路拆解 #

• 先定义单个红色方块的基础大小（比如设为tileSize = 50，你可以按需调整）
• 计算整个方块区域的总尺寸：totalSize = tileSize * rowCount * fieldSize，这里fieldSize就是你说的缩放系数
• 计算居中的起始坐标：
  • 水平起始点startX：(canvas.width - totalSize) / 2
  • 垂直起始点startY：(canvas.height - totalSize) / 2
• 最后循环绘制每个红色方块，基于起始坐标逐个定位每个方块的位置

完整可运行代码示例 #

<canvas id="myCanvas" width="600" height="600" style="border:1px solid #ccc;"></canvas>

<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 可自由调整的参数
const rowCount = 2; // N×N的N值，改3就是3×3方块
const fieldSize = 0.8; // 区域占Canvas的比例，1=全屏，0.5=Canvas尺寸的1/2
const tileSize = 50; // 单个红色方块的基础大小

// 计算整个方块区域的实际尺寸
const totalAreaSize = tileSize * rowCount * fieldSize;

// 计算居中的起始坐标
const startX = (canvas.width - totalAreaSize) / 2;
const startY = (canvas.height - totalAreaSize) / 2;

// 循环绘制N×N的红色方块
for (let i = 0; i < rowCount; i++) {
  for (let j = 0; j < rowCount; j++) {
    ctx.fillStyle = 'red';
    // 每个方块的位置 = 起始坐标 + 索引*缩放后的单个方块大小
    const tileX = startX + j * tileSize * fieldSize;
    const tileY = startY + i * tileSize * fieldSize;
    ctx.fillRect(tileX, tileY, tileSize * fieldSize, tileSize * fieldSize);
  }
}
</script>

关键细节说明 #

• fieldSize会同时缩放整个方块区域和单个方块的大小，保证区域比例协调，且始终居中
• 不管你把rowCount改成任何数值，startX和startY都会自动重新计算，确保区域永远在Canvas正中央
• 你可以直接修改参数测试效果，比如把rowCount改成4、fieldSize改成0.5，看看是不是依然完美居中

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