JavaScript实现基于旋转中心的FOV视锥线绘制

在开发类似《Doom》的 2.5D 射线投射游戏时，精确绘制视野（Field of View，FOV）常常令开发者感到棘手。许多新手开发者习惯调用 ctx.rotate() 搭配 moveTo/lineTo 来绘制两条扇形边界线，但很快会发现：Canvas 的 rotate() 仅影响后续绘图的变换矩阵，并不会自动修正手动计算的坐标值——若仍按原始未旋转的坐标绘制，线条就会严重偏移。

因此，正确做法是：彻底放弃依赖 Canvas 变换，改为对关键点（如角色立方体的顶点）进行纯数学旋转计算，再使用世界坐标系中的绝对坐标来绘制线条。这里采用的是标准二维绕点旋转公式：

function rotatePoint(point, centro, angleRad) {
  const dx = point.x - centro.x;
  const dy = point.y - centro.y;
  return {
    x: centro.x + dx * Math.cos(angleRad) - dy * Math.sin(angleRad),
    y: centro.y + dx * Math.sin(angleRad) + dy * Math.cos(angleRad)
  };
}

举个例子：假设“玩家立方体”的宽和高均为 size，中心点为 (this.x + size/2, this.y + size/2)，FOV 张角为 fovAngle（例如 60° 对应 Math.PI/3）。那么左右两条边界线可以从中心点分别向两个偏移角方向延伸生成：

const center = { x: this.x + this.width / 2, y: this.y + this.height / 2 };
const halfFov = Math.PI / 6; // 30° for 60° total FOV
const leftAngle = this.radians() - halfFov;
const rightAngle = this.radians() + halfFov;

// 左边界端点（从中心出发，长度设为 200 像素）
const leftEnd = {
  x: center.x + 200 * Math.cos(leftAngle),
  y: center.y + 200 * Math.sin(leftAngle)
};

// 右边界端点
const rightEnd = {
  x: center.x + 200 * Math.cos(rightAngle),
  y: center.y + 200 * Math.sin(rightAngle)
};

// 绘制 FOV 三角区域（可选填充）或仅画两条射线
this.desenho.beginPath();
this.desenho.strokeStyle = "rgba(0,100,255,0.7)";
this.desenho.lineWidth = 1.5;
this.desenho.moveTo(center.x, center.y);
this.desenho.lineTo(leftEnd.x, leftEnd.y);
this.desenho.moveTo(center.x, center.y);
this.desenho.lineTo(rightEnd.x, rightEnd.y);
this.desenho.stroke();

这里有几个需要注意的点：

• 确保 this.radians() 返回的是弧度制角度——若使用的是角度制，务必先转换：deg * Math.PI / 180。
• 所有坐标计算均在世界坐标系中完成，不受 Canvas 当前变换状态影响，从而大幅提升鲁棒性。
• 若需动态更新 FOV（如鼠标控制转向），只需每次重绘前重新计算端点即可。
• 后续进行射线投射时，可将 FOV 角度范围离散化为多条等间隔射线，每条射线的方向为 this.radians() ± offset。

这种方法的本质是将几何变换逻辑显式地写在代码中，而非依赖 Canvas 的隐式状态。它既保证了精度，又便于调试和扩展——这正是构建稳定 RayCasting 渲染管线的关键一步。