为何JavaScript Canvas绘制棋盘时Y轴第8格后X轴不偏移？

我尝试用JavaScript在HTML Canvas上绘制64格棋盘，但Y轴画完前8个方块后，X轴（posX）无法正确增加以绘制下一行，代码如下：

原代码 #

<body>
    <canvas id="mainCanvas" width="600" height="600"></canvas>
    <script src="js/main.js"></script>
</body>

#mainCanvas {
  background-color: black;
}

const canvas = document.getElementById("mainCanvas");
const ctx = canvas.getContext("2d");

const sWidth = 75;
const sHeight =75;
const sCount = 64;
let posY = 0;
let posX = 0;

function DrawSquare(posX,posY,color){
    console.log(`Drawing square at (${posX}, ${posY}) with color ${color}`);
    ctx.beginPath();
    ctx.rect(posX, posY, sWidth, sHeight);
    ctx.fillStyle = color;
    ctx.fill();
    ctx.closePath();
}

for(let i = 0;i < sCount;i++){

    if(i % 2  == 0){
        DrawSquare(posX, posY,"white");
        console.log("white"+posX)
     }else{
        DrawSquare(posX, posY,"black");
        console.log("black")
     }

     if(i>7){
        if(i%8==0){
            posX+=75;
         }
      }
     posY+=75;
}

问题分析 #

你的循环逻辑存在两个核心错误：

1. 每次循环都执行posY+=75，导致每画一个方块Y坐标就下移，而非画完一整行后再换行
2. X轴的换行判断逻辑混乱，i>7且i%8==0时才增加posX，但此时posY已经累计下移8次，完全偏离了正确的行位置

修正方案 #

采用双层循环分别控制行和列，直接通过行/列索引计算方块位置，同时结合行+列的奇偶性判断颜色（实现棋盘交错效果）：

修正后的完整代码 #

<body>
    <canvas id="mainCanvas" width="600" height="600"></canvas>
    <script src="js/main.js"></script>
</body>

#mainCanvas {
  background-color: black;
}

const canvas = document.getElementById("mainCanvas");
const ctx = canvas.getContext("2d");

const sWidth = 75;
const sHeight = 75;
const rows = 8;
const cols = 8;

function DrawSquare(posX, posY, color) {
    ctx.beginPath();
    ctx.rect(posX, posY, sWidth, sHeight);
    ctx.fillStyle = color;
    ctx.fill();
    ctx.closePath();
}

// 遍历每一行
for (let row = 0; row < rows; row++) {
    // 遍历当前行的每一列
    for (let col = 0; col < cols; col++) {
        const posX = col * sWidth;
        const posY = row * sHeight;
        // 行+列的奇偶性决定颜色，实现交错效果
        const color = (row + col) % 2 === 0 ? "white" : "black";
        DrawSquare(posX, posY, color);
    }
}

这段代码逻辑清晰，通过行和列的索引直接计算每个方块的坐标，颜色判断符合棋盘的视觉规则，能正确绘制出8×8的完整棋盘。

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