在画布上展开数组

Question

所以我对 javascript 比较陌生，我正在尝试为两个玩家做一个棋盘。我正在设计电路板，我想在电路板的侧面和下方添加数字和字母，所以我在电路板下方和右侧创建了一个 Rect。我设法将数字放在右侧，但是当我尝试在板下进行时，整个变量只是保持在一起而不是分散开来。 我已经尝试过不同的事情，比如从“i”更改为“j”，甚至是位置，但没有任何效果 我是整个编码方面的新手，所以如果您想了解更多关于代码以及我所做的事情，请询问

代码如下：

        var ctx = document.getElementById('canvas1').getContext('2d');
        var x = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'];
        var y = ['1', '2', '3', '4', '5', '6', '7', '8']; 
        for(var i = 0; i < 8; i++){


            for(var j = 0; j < 8; j++){


                if( (i+j) % 2 == 0){
                    color = 'black';
                }
                else{
                    color = 'white';
                }

                ctx.fillStyle = color;
                ctx.fillRect( 20 + i*80, 20 + j*80, 80, 80 );

                ctx.fillText( x [i], 70, 685, + i*80);                 
                
 
            };
         

         ctx.font = '30px helvetica';
         ctx.fillStyle = 'black'; 
         ctx.fillText( y [i], 667.5, 70 + i*80);  

Answer 1

您可以执行以下操作。我建议提取常量以分隔变量，或将逻辑事件发送到 drawBox()、drawText() 等函数。

var ctx = document.getElementById('canvas1').getContext('2d');

var x = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'];
var y = ['1', '2', '3', '4', '5', '6', '7', '8'];

for (var i = 0; i < 8; i++) {
  for (var j = 0; j < 8; j++) {

    if ((i + j) % 2 == 0) {
      color = 'black';
    } else {
      color = 'white';
    }
    ctx.fillStyle = color;

    let xCord = 20 + j * 80;
    let yCord = 20 + i * 80;

    ctx.fillRect(xCord, yCord, 80, 80);


    ctx.font = '30px helvetica';
    ctx.fillStyle = 'red';
    ctx.fillText(x[j], xCord, (yCord + 40));
  }

}

<canvas id="canvas1" height="700" width="700" />

Answer 2

你不应该把它放在内部循环中，因为你不想打印一个字母/数字 64 次。把它放在外循环，甚至是一个单独的循环。对于您选择的字体大小，您最好增加这些字母/数字的可用空间。我选择了 40 而不是 20，增加了画布大小以使其适合。

对于打印字母，将文本水平和垂直居中可能会有所帮助。上下文对象上有相应的属性。

还将正方形的大小和这个“装订线”定义为单独的常量。这将使以后在需要时更容易适应它们。

最后，如果棋盘的底部有白色棋子（这很常见），那么黑/白区域应该倒置，边上的编号应该从底部开始。

const ctx = document.getElementById('canvas1').getContext('2d');

const x = 'ABCDEFGH';
const y = '12345678';
const size = 80;
const gutter = 40;

for (let i = 0; i < 8; i++) {
  for (let j = 0; j < 8; j++) {
    ctx.fillStyle = ["white", "black"][(i + j) % 2];
    const xCord = gutter + j * size;
    const yCord = gutter + i * size;
    ctx.fillRect(xCord, yCord, size, size);
  }
}

// Set alignment of text to center in both directions
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';

ctx.font = '30px helvetica';
ctx.fillStyle = 'red';

for (let i = 0; i < 8; i++) {
    ctx.fillText(x[i], gutter + (i + 0.5) * size, gutter / 2);
    ctx.fillText(y[7-i], gutter / 2, gutter + (i + 0.5) * size);
    ctx.fillText(x[i], gutter + (i + 0.5) * size, gutter * 1.5 + size * 8);
    ctx.fillText(y[7-i], gutter * 1.5 + size * 8, gutter + (i + 0.5) * size);
}

<canvas id="canvas1" height="720" width="720" />