为何其中一条线条颜色显示异常？Canvas绘图问题求助

Canvas 2D上下文的绘图基于路径累积机制：第一次调用drawLines时，添加了第一条线的路径并完成描边；第二次调用时未重置路径，新的线条路径会被追加到已有路径中，调用stroke()时会把所有累积的路径（两条线）都用当前的strokeStyle（红色）重新描边，导致原本的蓝线被覆盖。

在每次绘制线条前，调用ctx.beginPath()重置路径，确保每次绘制的都是独立路径，不会互相干扰。

修正后的JavaScript代码 #

let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");

let line1 = {
  P1: {
    x: 90,
    y: 50
  },
  P2: {
    x: 110,
    y: 10
  },
  color: "blue",
};
let line2 = {
  P1: {
    x: 10,
    y: 150
  },
  P2: {
    x: 80,
    y: 130
  },
  color: "red",
};

drawLines(line1);
drawLines(line2);


function drawLines(line) {
  ctx.beginPath(); // 重置路径，避免路径累积
  ctx.strokeStyle = line.color;
  ctx.moveTo(line.P1.x, line.P1.y);
  ctx.lineTo(line.P2.x, line.P2.y);
  ctx.stroke();
}

HTML代码（无需修改） #

<canvas id="myCanvas" width="200" height="200" style="border:1px solid #000000;"></canvas>

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