4. 车道偏离预警可视化

任务目标

在 HUD 画布上绘制左右两条车道线，并根据车辆横向偏移量判断是否偏离：正常时车道线为绿色，偏离时对应车道线变红并显示“车道偏离”警示文字。本案例用纯 HTML + Canvas 实现一个可交互的最小演示，通过滑块模拟车辆横向位置。

实现思路

完整代码

将以下内容保存为 hud_lane.html，用浏览器直接打开即可。拖动滑块改变车辆横向位置，观察车道线颜色与警示文字变化。

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>车道偏离预警</title>
<style>
  body{margin:0;background:#111;display:flex;flex-direction:column;align-items:center;font-family:sans-serif;color:#eee}
  canvas{background:#1a1a2e;border-radius:8px;margin-top:16px}
  .ctrl{margin:12px;display:flex;align-items:center;gap:10px}
  input[type=range]{width:300px}
</style></head>
<body>
<canvas id="hud" width="480" height="320"></canvas>
<div class="ctrl">
  <label>横向偏移</label>
  <input id="offset" type="range" min="-100" max="100" value="0">
  <span id="val">0</span>
</div>
<script>
const cv = document.getElementById('hud');
const ctx = cv.getContext('2d');
const slider = document.getElementById('offset');
const valEl = document.getElementById('val');

const W = cv.width, H = cv.height;
const LANE_LEFT = 120;   // 左车道线 x
const LANE_RIGHT = 360;  // 右车道线 x
const THRESHOLD = 40;    // 偏离阈值(px)

function drawLane(x, color) {
  ctx.strokeStyle = color;
  ctx.lineWidth = 6;
  ctx.setLineDash([24, 16]);
  ctx.beginPath();
  ctx.moveTo(x, H);
  ctx.lineTo(x, 0);
  ctx.stroke();
  ctx.setLineDash([]);
}

function render(offset) {
  ctx.clearRect(0, 0, W, H);

  // 车辆中心随偏移移动
  const carX = W / 2 + offset;
  const deviated = Math.abs(offset) > THRESHOLD;

  // 偏离时对应侧车道线变红
  const leftColor  = (deviated && offset < 0) ? '#e53935' : '#43a047';
  const rightColor = (deviated && offset > 0) ? '#e53935' : '#43a047';

  drawLane(LANE_LEFT, leftColor);
  drawLane(LANE_RIGHT, rightColor);

  // 车辆
  ctx.fillStyle = '#42a5f5';
  ctx.fillRect(carX - 20, H - 70, 40, 60);

  // 警示
  if (deviated) {
    ctx.fillStyle = '#e53935';
    ctx.font = 'bold 22px sans-serif';
    ctx.textAlign = 'center';
    ctx.fillText('⚠ 车道偏离', W / 2, 40);
  }
}

slider.addEventListener('input', () => {
  const v = Number(slider.value);
  valEl.textContent = v;
  render(v);
});

render(0);
</script>
</body></html>

运行与验证

• 用浏览器打开 hud_lane.html，画布显示两条绿色虚线车道线和一辆蓝色车辆。
• 拖动滑块使偏移量绝对值 ≤ 40：车道线保持绿色，无警示文字。
• 拖动滑块使偏移量 > 40（向右偏）：右侧车道线变红，顶部出现“⚠ 车道偏离”。
• 拖动滑块使偏移量 < -40（向左偏）：左侧车道线变红，同样出现警示。

通过条件：车道线颜色与警示文字随偏移量跨过阈值 ±40 正确切换，且偏离方向与变红车道线一致。