如何简化创建盒子的代码？

Question

我是一个初学者，两周前刚开始学习如何用HTML5编码。我想用一堆盒子来创建一个网格。似乎有一个方法只是通过HTML，但我想做尝试在JavaScript中。我为这些盒子设置了一个函数。

function outlineRect(leftX, topY, width, height, strokeColor, lineThickness) {
     canvasContext.strokeStyle = strokeColor;
     canvasContext.lineWidth = lineThickness;
     canvasContext.strokeRect(leftX, topY, width, height);
}

然后我就开始处理这些盒子 最后，我想要一个四行八列的网格。这就是我的想法。

var boardBoxX = 375
var boardBoxY = 173
var boardBox = 75
var highlightBorder = 5
var blackBorder = 2

outlineRect(boardBoxX, boardBoxY, boardBox, boardBox, '#ffe9b5', highlightBorder);
outlineRect(boardBoxX, boardBoxY, boardBox, boardBox, '#000000', blackBorder);
outlineRect(boardBoxX+boardBox, boardBoxY, boardBox, boardBox, '#ffe9b5', highlightBorder);
outlineRect(boardBoxX+boardBox, boardBoxY, boardBox, boardBox, '#000000', blackBorder);

我的想法是把盒子的长度(boardBox)加到X坐标(boardBoxX)上 直到做了8个盒子。然后y坐标(boardBoxY)将被boardBox添加，X坐标重置。我想简化代码，因为如果不简化代码，仅仅一个表格就会有64行。我最多只能做一个动画框......谁能告诉我如何简化？非常感谢回复我问题的人。

Answer 1

第一步的简化。

我想先做一个函数 doubleOutline你可以将X,Y,width,height传递给它，但它会提供颜色和线条粗细，并对outlineRect进行两次调用--这样一来，对于每个 "盒子"，你可以只进行一次函数调用，而且你不必每次都重复颜色& 粗细。

第二步的简化。

我会做一些 "for "循环来计算盒子的X和Y位置。

for (column = 0; column < 8; column++) {
  for (row = 0; row < 4; row++) {
    doubleOutline (boardBoxX + column*boardBox, boardBoxY + row*boardBox, boardBox, boardBox);
  }
}

这样就可以计算出所有不同的行和列的位置 并计算出下一个盒子的位置 因为你已经完成了第一步 并做了一个doubleOutline函数来简化你的勾勒顺序

还有其他可能的简化策略，但这个希望能帮到你!