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

2.5D 射线投射游戏中 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)
  };
}

实际示例：从玩家中心点生成 FOV 边界射线

举个例子：假设你的“玩家立方体”宽高都是 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 渲染管线的关键一步。