html代码

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

js代码部分

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
 
// 轨迹点数组
const points = [
  { x: 50, y: 50 },
  { x: 100, y: 100 },
  { x: 150, y: 200 },
  { x: 200, y: 150 },
  { x: 250, y: 100 },
  { x: 300, y: 50 }
];
 
// 绘制轨迹
function drawTrajectory() {
  ctx.beginPath();
  ctx.moveTo(points[0].x, points[0].y); // 从第一个点开始
  for (let i = 1; i < points.length; i++) {
    ctx.lineTo(points[i].x, points[i].y); // 连接其他点
    ctx.strokeStyle = '#000'; // 线条颜色
    ctx.stroke(); // 绘制线条
    ctx.beginPath(); // 重置路径开始新的点
    ctx.arc(points[i].x, points[i].y, 5, 0, 2 * Math.PI); // 绘制点
    ctx.fillStyle = '#f00'; // 点的颜色
    ctx.fill(); // 填充点
  }
}
 
// 调用函数绘制轨迹
drawTrajectory();