本文详解 canvas 绘制 8×8 棋盘时常见的坐标逻辑错误，指出原代码中 `posy` 未重置导致列错位的根本原因，并提供结构清晰、可读性强的双重解决方案：完整双循环法与优化单循环法（利用黑色背景仅绘白格）。
在使用 HTML <canvas> 绘制 8×8 国际象棋棋盘（共 64 个方格）时，一个典型陷阱是：仅用单层 for 循环 + 简单模运算控制行列，却忽略了 posY 必须按行归零重置。原代码中，posY 在每次迭代后无条件 += 75，导致第 9 个方格（即第二行第一个）被画在 (0, 600) 而非 (0, 75)——因为 posY 已累积到 8 × 75 = 600，远超画布高度，从而“消失”在可视区域之外；同时 posX 的更新逻辑 if(i > 7 && i % 8 === 0) 实际触发于 i = 16, 24, ...（因 i % 8 == 0 在 i=0 时成立但被 i>7 拦截），造成列偏移。
✅ 正确思路应明确区分「行」与「列」：每 8 个方格为一行，行内 posX 递增，行末需重置 posY 并推进 posX。
✅ 推荐方案一：双层 for 循环（最直观、易维护）
const canvas = document.getElementById("mainCanvas");
const ctx = canvas.getContext("2d");
const sWidth = 75;
const sHeight = 75;
// 遍历 8 行 × 8 列
for (let row = 0; row < 8; row++) {
for (let col = 0; col < 8; col++) {
const posX = col * sWidth;
const posY = row * sHeight;
// 棋盘配色：(row + col) % 2 === 0 → 白格；否则黑格（背景为黑，可省略黑格绘制）
if ((row + col) % 2 === 0) {
ctx.fillStyle = "white";
ctx.fillRect(posX, posY, sWidth, sHeight);
}
}
}? 优势：逻辑直白，行列索引清晰，便于扩展（如添加点击交互、高亮等）；fillRect() 替代 beginPath()+rect()+fill() 更简洁高效。
✅ 推荐方案二：单循环 + 坐标映射（轻量级优化）
若坚持单循环，需显式计算行列：
const totalSquares = 64;
for (let i = 0; i < totalSquares; i++) {
const row = Math.floor(i / 8); // 当前行号（0~7）
const col = i % 8; // 当前列号（0~7）
const posX = col * sWidth;
const posY = row * sHeight;
if ((row + col) % 2 === 0) {
ctx.fillStyle = "white";
ctx.fillRect(posX, posY, sWidth, sHeight);
}
}⚠️ 关键注意事项
- 勿依赖 posY += 75 累加：单循环中 posY 必须由行号动态计算（row * sHeight），而非持续累加后尝试“修正”。
- ctx.closePath() 非必需：fillRect() 是原子操作，无需路径操作；若用 rect()，也只需 fill()，closePath() 对矩形无意义。
- 性能提示：黑色背景上仅绘制白格可减少 50% 绘制调用，但双循环结构更利于后期维护（例如切换主题色、添加边框等）。
- 尺寸校验：8 × 75 = 600，恰好匹配 <canvas width="600" height="600">，确保无裁剪。
通过明确行列关系并采用声明式坐标计算（而非状态式累加），即可彻底解决“方格不显示在右侧”的问题。推荐初学者优先使用双循环方案——清晰胜于技巧，稳定优于精简。
