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

我是一个初学者,两周前刚开始学习如何用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行。我最多只能做一个动画框……谁能告诉我如何简化?非常感谢回复我问题的人。

解决方案:

第一步的简化。

我想先做一个函数 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函数来简化你的勾勒顺序

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

给TA打赏
共{{data.count}}人
人已打赏
未分类

如何获得网络访问AWS VPC?

2022-9-8 13:12:39

未分类

如何在静态中使用getString()?

2022-9-8 13:12:41

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索