在设置车辆动画时绘制多段线

<canvas id="myCanvas" width="500" height="500"></canvas>

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

var points = [
  { x: 100, y: 100 },
  { x: 200, y: 200 },
  { x: 300, y: 150 },
  { x: 400, y: 250 }
];

ctx.beginPath();
ctx.moveTo(points[0].x, points[0].y);
for (var i = 1; i < points.length; i++) {
  ctx.lineTo(points[i].x, points[i].y);
}
ctx.stroke();

function animate() {
  // 更新车辆位置的代码
  // ...

  // 清空画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 绘制多段线
  ctx.beginPath();
  ctx.moveTo(points[0].x, points[0].y);
  for (var i = 1; i < points.length; i++) {
    ctx.lineTo(points[i].x, points[i].y);
  }
  ctx.stroke();

  // 循环调用动画函数
  requestAnimationFrame(animate);
}

// 启动动画
animate();