如何在Canvas中实现任意线条的渐进式绘制？

我明白你遇到的问题了——垂直/水平线条的渐进绘制能正常工作，但换成斜线就出问题，这其实是因为你当前的斜线绘制逻辑存在本质问题。

问题根源分析 #

你原来的斜线代码里，每次递归都是绘制一段独立的短斜线：

line(155, i, 155+(57-i)/2, i-2);

这些短线段并没有沿着同一条完整直线延伸，而是每次的起点和终点都在偏移，加上round的lineCap，就会出现重叠、错位的怪异视觉效果。而垂直/水平线条之所以正常，是因为它们的方向单一，短线段刚好能衔接成连续的视觉假象。

通用解决方案：基于进度的直线延伸 #

正确的思路应该是：先确定完整直线的起点和终点，然后通过一个进度参数（0到1），逐步绘制从起点到当前进度点的线段——相当于让直线从起点“生长”到终点，不管是水平、垂直还是任意角度的斜线都适用。

方案1：基于固定步长的递归实现

先封装一个通用的渐进绘制函数，适配任意直线：

// 通用渐进式直线绘制函数
function drawProgressiveLine(startX, startY, endX, endY, stepCount, delay) {
  // 计算每一步的坐标增量
  const deltaX = (endX - startX) / stepCount;
  const deltaY = (endY - startY) / stepCount;
  
  let currentStep = 0;

  function drawNext() {
    // 计算当前进度的终点坐标
    const currentX = startX + deltaX * currentStep;
    const currentY = startY + deltaY * currentStep;

    // 绘制从起点到当前进度点的完整线段
    context.beginPath();
    context.moveTo(startX, startY);
    context.lineTo(currentX, currentY);
    context.stroke();

    currentStep++;
    if (currentStep <= stepCount) {
      setTimeout(drawNext, delay);
    }
  }

  drawNext();
}

然后用这个函数实现你需要的成对斜线效果：

// 初始化Canvas上下文（假设你已经获取到canvas元素）
const canvas = document.getElementById('yourCanvas');
const context = canvas.getContext('2d');
context.lineWidth = 10;
context.lineCap = 'round';

// 定义两条斜线的起点和终点
// 第一条：从(155,57)到(166,35)
// 第二条：从(245,57)到(234,35)
drawProgressiveLine(155, 57, 155 + (57-35)/2, 35, 11, 10);
drawProgressiveLine(245, 57, 245 - (57-35)/2, 35, 11, 10);

方案2：基于时长的流畅动画（推荐）

用requestAnimationFrame替代setTimeout，能让动画更流畅，适配任意总时长：

function drawProgressiveLine(startX, startY, endX, endY, totalDuration) {
  const startTime = performance.now();

  function animate(currentTime) {
    const elapsedTime = currentTime - startTime;
    // 计算当前进度（0到1）
    const progress = Math.min(elapsedTime / totalDuration, 1);

    // 根据进度计算当前终点坐标
    const currentX = startX + (endX - startX) * progress;
    const currentY = startY + (endY - startY) * progress;

    // 绘制线段
    context.beginPath();
    context.moveTo(startX, startY);
    context.lineTo(currentX, currentY);
    context.stroke();

    if (progress < 1) {
      requestAnimationFrame(animate);
    }
  }

  requestAnimationFrame(animate);
}

// 使用示例：总时长110ms（和你原来的11步×10ms效果一致）
drawProgressiveLine(155, 57, 166, 35, 110);
drawProgressiveLine(245, 57, 234, 35, 110);

核心逻辑总结 #

不管用哪种方式，核心都是每次绘制从固定起点到当前进度点的完整线段，而不是分段绘制独立的短线段。这样就能保证直线从起点平滑延伸到终点，完美适配任意角度的线条。

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