如何为带多个参数的Canvas绘图函数编写for循环

原代码错误点 #

• 不符合JavaScript for 循环的语法规范：for 循环仅支持初始化、条件判断、增量操作三个用分号分隔的代码块，原代码将多变量声明、多个判断条件混写在三个块中，直接触发语法报错
• 未定义text变量的取值，调用drawLineWithText时会报变量未定义错误
• 固定参数fromX、toX无需在循环中重复赋值，水平直线的fromY和toY数值一致，不需要单独做toY的递增逻辑

正确实现代码 #

假设需求是每隔50px绘制一条水平横线，每条横线左侧展示对应文本，完整的循环代码如下：

// 提前定义固定参数，避免循环内重复赋值
const fromX = 70;
const toX = 700;
// 可自定义每条线对应的文本，也可以直接用模板字符串生成动态文本
const lineTextList = ['文本1', '文本2', '文本3', '文本4', '文本5', '文本6', '文本7', '文本8', '文本9'];

for (let index = 0, fromY = 50; fromY < 500; index++, fromY += 50) {
  const currentText = lineTextList[index] || `第${index + 1}条线`;
  // 水平直线的Y坐标一致，toY直接用fromY即可
  drawLineWithText(currentText, fromX, fromY, toX, fromY);
}

如果需要绘制斜线，仅需调整toY的生成逻辑即可，比如斜线每次Y坐标偏移50可将toY改为fromY + 50。

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