请使用 JavaScript 和 HTML5 Canvas 来写一下飞机领航仪表模拟系统设计中，领航仪表因飞行航线变动而产生变化的过程

好的，我可以帮您用 JavaScript 和 HTML5 Canvas 来实现这个模拟系统。首先，我们需要定义一些变量来表示飞机和航线的状态：

// 飞机当前位置
var planeX = 100;
var planeY = 100;

// 飞行航线
var route = [
  { x: 50, y: 50 },
  { x: 150, y: 200 },
  { x: 250, y: 150 },
  { x: 350, y: 250 },
  { x: 450, y: 200 }
];
var currentRouteIndex = 0;

接下来，我们需要定义一个函数来绘制领航仪表：

function drawHeadingIndicator() {
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  
  // 绘制黑色背景
  ctx.fillStyle = "black";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  
  // 绘制飞行航线
  ctx.beginPath();
  ctx.moveTo(route[0].x, route[0].y);
  for (var i = 1; i < route.length; i++) {
    ctx.lineTo(route[i].x, route[i].y);
  }
  ctx.strokeStyle = "white";
  ctx.stroke();
  
  // 绘制当前航向线
  var currentTarget = route[currentRouteIndex];
  var dx = currentTarget.x - planeX;
  var dy = currentTarget.y - planeY;
  var angle = Math.atan2(dy, dx);
  var length = Math.sqrt(dx*dx + dy*dy);
  var center = { x: canvas.width / 2, y: canvas.height / 2 };
  var headingLineLength = Math.min(length, 200);
  var headingLineEnd = {
    x: center.x + headingLineLength * Math.cos(angle),
    y: center.y + headingLineLength * Math.sin(angle)
  };
  ctx.beginPath();
  ctx.moveTo(center.x, center.y);
  ctx.lineTo(headingLineEnd.x, headingLineEnd.y);
  ctx.strokeStyle = "red";
  ctx.stroke();
  
  // 绘制当前航向角
  var headingAngle = angle * 180 / Math.PI;
  ctx.fillStyle = "white";
  ctx.font = "20px Arial";
  ctx.fillText("Heading: " + headingAngle.toFixed(1) + "°", 10, 30);
}

最后，我们需要定义一个函数来更新飞机和航线的状态：

function update() {
  // 移动飞机
  var target = route[currentRouteIndex];
  var dx = target.x - planeX;
  var dy = target.y - planeY;
  var distanceToTarget = Math.sqrt(dx*dx + dy*dy);
  if (distanceToTarget < 5) {
    currentRouteIndex = (currentRouteIndex + 1) % route.length;
  } else {
    planeX += dx * 0.02;
    planeY += dy * 0.02;
  }
  
  // 绘制领航仪表
  drawHeadingIndicator();
  
  // 循环更新
  setTimeout(update, 20);
}

// 开始更新
update();

这样，我们就完成了飞机领航仪表模拟系统的设计，当飞机飞行到下一个航点时，领航仪表会自动调整显示以指向新的航点。