Javascript 在画布上展开一个数组

所以我对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);  

var ctx=document.getElementById（'canvas1'）.getContext（'2d'）；
变量x=['A'，'B'，'C'，'D'，'E'，'F'，'G'，'H']；
变量y=['1'，'2'，'3'，'4'，'5'，'6'，'7'，'8']；
对于（变量i=0；i<8；i++）{
对于（var j=0；j<8；j++）{
如果（（i+j）%2==0）{
颜色='黑色'；
}
否则{
颜色=白色；
}
ctx.fillStyle=颜色；
ctx.fillRect（20+i*80,20+j*80,80,80）；
ctx.fillText（x[i]，70685，+i*80）；
};
ctx.font='30px helvetica'；
ctx.fillStyle='黑色'；
ctx.fillText（y[i]，667.5,70+i*80）；

您可以执行以下操作。我建议提取常量以分离变量，或将逻辑事件化为函数，如

drawBox（）

，

drawText（）

等

var ctx=document.getElementById（'canvas1'）.getContext（'2d'）；
变量x=['A'，'B'，'C'，'D'，'E'，'F'，'G'，'H']；
变量y=['1'，'2'，'3'，'4'，'5'，'6'，'7'，'8']；
对于（变量i=0；i<8；i++）{
对于（var j=0；j<8；j++）{
如果（（i+j）%2==0）{
颜色='黑色'；
}否则{
颜色=白色；
}
ctx.fillStyle=颜色；
设xCord=20+j*80；
设yCord=20+i*80；
ctx.fillRect（xCord，yCord，80,80）；
ctx.font='30px helvetica'；
ctx.fillStyle='红色'；
ctx.fillText（x[j]，xCord，（yCord+40））；
}
}

---

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

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

还可以将正方形的大小和这个“边沟”定义为单独的常量。这将使以后在需要时更容易调整它们

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

const ctx=document.getElementById（'canvas1'）.getContext（'2d'）；
常数x='ABCDEFGH'；
常数y='12345678'；
常数大小=80；
常数=40；
for（设i=0；i<8；i++）{
for（设j=0；j<8；j++）{
ctx.fillStyle=[“白色”、“黑色”][（i+j）%2]；
常数xCord=排水沟+j*尺寸；
const yCord=排水沟+i*尺寸；
ctx.fillRect（xCord，yCord，size，size）；
}
}
//将文本对齐设置为在两个方向上居中
ctx.textAlign='中心'；
ctx.textb基线='中间'；
ctx.font='30px helvetica'；
ctx.fillStyle='红色'；
for（设i=0；i<8；i++）{
ctx.fillText（x[i]，边沟+（i+0.5）*尺寸，边沟/2）；
ctx.fillText（y[7-i]，槽/2，槽+（i+0.5）*尺寸）；
ctx.fillText（x[i]，边沟+（i+0.5）*大小，边沟*1.5+大小*8）；
ctx.fillText（y[7-i]，边沟*1.5+尺寸*8，边沟+（i+0.5）*尺寸）；
}

---

请提供问题的解决方法。请提供问题的屏幕截图。