如何将每组中的4个点连接起来，以可视化“移动方向”？

// 获取Canvas元素
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

// 定义坐标系范围和单位
const xMin = 0;
const xMax = 100;
const yMin = 0;
const yMax = 100;

// 确定点的位置
const points = [
  { x: 10, y: 20 },
  { x: 30, y: 40 },
  { x: 50, y: 60 },
  { x: 70, y: 80 }
];

// 连接点
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.stroke();

// 可视化移动方向
ctx.beginPath();
ctx.moveTo(points[points.length - 2].x, points[points.length - 2].y);
ctx.lineTo(points[points.length - 1].x, points[points.length - 1].y);
// 添加箭头或其他符号
ctx.stroke();