如何在JavaScript的贝塞尔曲线内部绘制捕获区域？

开发者阿泽

2026-6-24

交通车道模拟：贝塞尔曲线内捕获区域绘制问题

我正在开发一个交通车道模拟项目，需要在自定义的贝塞尔曲线车道内部添加「捕获区域」。目前已实现支持拖拽调整的贝塞尔曲线车道功能，但捕获区域的绘制效果不符合预期需求，寻求技术解决方案。

问题详情

已完成功能：可拖拽调整的贝塞尔曲线车道（支持控制点拖拽，实时更新车道形状）
待解决问题：捕获区域绘制效果不达标，无法匹配参考效果图的样式（参考图核心特征：捕获区域沿车道曲线延伸，完全贴合车道内部轮廓，边缘与车道边界保持平行且宽度均匀）

现有实现核心逻辑

使用Canvas绘制贝塞尔曲线车道，尝试通过偏移车道曲线的方式生成捕获区域，但出现边缘错位、形状扭曲的问题。关键代码片段如下：

// 绘制车道
function drawLane() {
  ctx.beginPath();
  ctx.moveTo(startX, startY);
  ctx.bezierCurveTo(cp1X, cp1Y, cp2X, cp2Y, endX, endY);
  ctx.lineWidth = laneWidth;
  ctx.strokeStyle = '#333';
  ctx.stroke();
}

// 现有捕获区域绘制尝试
function drawCaptureArea() {
  // 尝试偏移曲线生成内部区域，但效果不符合需求
  ctx.beginPath();
  ctx.moveTo(startX + offset, startY + offset);
  ctx.bezierCurveTo(cp1X + offset, cp1Y + offset, cp2X + offset, cp2Y + offset, endX + offset, endY + offset);
  // ... 后续闭合路径逻辑
  ctx.fillStyle = 'rgba(255,0,0,0.3)';
  ctx.fill();
}