JavaScript新手求助：Canvas画线函数代码优化建议

嘿，作为JavaScript新手刚接触Canvas绘制，碰到代码冗余和运行问题太正常啦！先帮你梳理下原代码里的核心问题：你一直在重复创建Rectangle实例、设置位置和颜色，这类重复操作不仅让代码臃肿，还容易出错（比如你没写完的rect2部分，很可能就是重复劳动导致的）。

原代码核心问题分析 #

function start(){
var COUNT = 5;
for(var i = 0; i < COUNT; i++){
var row = 0;
var rect = new Rectangle(100, 100);
rect.setPosition(0, row);
rect.setColor(Color.blue);
var rect1 = new Rectangle(100, 100);
rect1.setPosition(100, row);
rect1.setColor(Color.red);
var rect2 = new ...
}
}

这里的冗余点很明显：每次创建矩形都要重复写new Rectangle(100,100)、setPosition、setColor，如果要加更多矩形，代码会越来越乱；而且row变量在循环里一直设为0，所有矩形会重叠在一起，大概率不符合你“绘制线条”的需求。

优化方案：复用逻辑+配置化 #

我们可以把创建矩形的逻辑封装成一个函数，再用配置数组来管理每个矩形的位置和颜色，这样代码既简洁又好维护：

function start() {
  const COUNT = 5;
  // 定义每个矩形的配置：位置x、y偏移量，颜色
  const rectConfigs = [
    { xOffset: 0, color: Color.blue },
    { xOffset: 100, color: Color.red },
    // 可以继续添加更多矩形配置，比如绿色矩形
    // { xOffset: 200, color: Color.green },
  ];

  // 封装创建矩形的复用函数，减少重复代码
  function createAndDrawRectangle(baseX, baseY, color) {
    const rect = new Rectangle(100, 100);
    rect.setPosition(baseX, baseY);
    rect.setColor(color);
    // 记得调用绘制方法（如果你的Rectangle类有这个方法的话），否则矩形不会显示
    rect.draw();
    return rect;
  }

  // 外层循环控制行数，让每行矩形向下偏移，避免重叠
  for (let rowIndex = 0; rowIndex < COUNT; rowIndex++) {
    const currentRowY = rowIndex * 100; // 每行间隔100px，和矩形高度一致
    // 遍历配置，创建当前行的所有矩形
    rectConfigs.forEach(config => {
      createAndDrawRectangle(config.xOffset, currentRowY, config.color);
    });
  }
}

优化点说明 #

• 消除冗余代码：把重复的矩形实例化、属性设置逻辑封装到createAndDrawRectangle函数里，只需要传入不同参数就能生成对应矩形，避免重复写相同代码。
• 配置化管理：用数组存储每个矩形的位置偏移和颜色，以后要添加/修改矩形，只需要调整配置数组，不用动核心逻辑，维护起来更轻松。
• 修复重叠问题：原代码里所有矩形都在同一行，优化后用rowIndex * 100让每行矩形向下偏移，实现按行排列的效果（如果你的需求是横向绘制线条，也可以改成x轴偏移逻辑）。
• 使用现代JS语法：用let/const替代var，避免变量提升和作用域带来的潜在bug，更符合现代JavaScript规范。

另外要注意：如果你的Rectangle类没有实现draw()（或类似的Canvas绘制方法），那即使创建了矩形实例，也不会显示在Canvas上，记得补充这部分逻辑哦！

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