嘿，我完全懂你现在的困扰——用Canvas做渐长虚线道路时，线条互相重叠追赶的样子真的很闹心，尤其数学基础弱的话，摸不准背后的逻辑太正常啦～

问题根源分析 #

你猜的没错，问题确实出在Line函数的逻辑里：之前的写法应该只是单纯让每条虚线的可见段长度增长，但没同步调整虚线之间的间隔长度。当所有虚线同时变长，间隔却没跟着变大，后面的虚线自然就会追上前面的，最终挤在一起。

核心解决方案：让间隔和虚线长度同步增长 #

我们要做的很简单：让虚线的间隔长度和虚线本身的长度保持固定比例，这样虚线变长时，间隔也跟着按比例变大，就能始终保持线条间的空隙，避免重叠。

修改后的Line函数示例 #

let speed = 1;

function Line(x1, y1, x2, y2) {
  this.x1 = x1;
  this.y1 = y1;
  this.x2 = x2;
  this.y2 = y2;
  // 初始的虚线可见段长度
  this.currentDashLength = 10;
  // 虚线与间隔的比例（可自定义，比如1:1或1:2）
  this.gapRatio = 1;
}

// 更新虚线长度的方法
Line.prototype.update = function() {
  // 让虚线长度随时间匀速增长
  this.currentDashLength += speed;
}

// 绘制虚线的方法
Line.prototype.draw = function(ctx) {
  // 保存当前画布状态，避免影响其他绘制元素
  ctx.save();
  
  ctx.beginPath();
  ctx.moveTo(this.x1, this.y1);
  ctx.lineTo(this.x2, this.y2);
  
  // 按比例计算间隔长度，保证和虚线同步增长
  const gapLength = this.currentDashLength * this.gapRatio;
  // 设置虚线样式：[可见段长度, 间隔长度]
  ctx.setLineDash([this.currentDashLength, gapLength]);
  
  ctx.stroke();
  // 恢复画布状态
  ctx.restore();
}

关键细节说明 #

• 比例自定义：如果想要间隔比虚线宽一倍，就把gapRatio改成2；要是想间隔更窄，设成0.5就行，完全可以根据视觉需求调整。
• 画布状态管理：用ctx.save()和ctx.restore()包裹绘制逻辑，能避免这条虚线的样式影响画布上的其他元素。
• 错落感优化（可选）：如果想要道路虚线更自然，可以给每条平行的Line设置不同的初始currentDashLength（比如第一条10，第二条15，第三条20），这样线条会有错落感，不会完全对齐，更贴近真实道路的样子。

这样调整后，所有虚线会同步生长，间隔也跟着变大，就再也不会出现互相追赶重叠的情况啦～

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