本文讲解在 RayCasting 游戏开发中，如何绕物体中心精确计算并绘制随视角旋转的视野（FOV）边界线，解决 canvas.rotate() 不改变坐标系原点导致的定位失效问题。
本文讲解在 raycasting 游戏开发中，如何绕物体中心精确计算并绘制随视角旋转的视野（fov）边界线，解决 `canvas.rotate()` 不改变坐标系原点导致的定位失效问题。
在实现类似《Doom》的 2.5D 射线投射游戏时，构建准确的视野（Field of View, FOV）是核心基础之一。FOV 通常表现为以玩家为中心、呈扇形展开的两条射线——即视锥的左右边界。许多开发者尝试直接调用 ctx.rotate() 配合 moveTo/lineTo 绘制，但很快会发现：Canvas 的 rotate() 只影响后续绘图的变换矩阵，并不改变你手动计算的坐标值；若仍按原始未旋转坐标绘制，线条将偏离预期方向。
因此，正确做法是：放弃依赖 canvas 变换，转而对关键点（如立方体顶点）进行数学旋转计算，再用绝对坐标绘制线条。关键在于使用标准二维绕点旋转公式：
给定旋转中心 centro = (cx, cy)、待旋转点 point = (px, py)、逆时针旋转角度 θ（弧度），旋转后坐标为：
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），则左右边界线可由中心向两个偏移角方向延伸生成：
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
立即学习“Java免费学习笔记（深入）”；
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 渲染管线的关键一步。
