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

作者：袖梨 2026-07-05

本文讲解在 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），则左右边界线可由中心向两个偏移角方向延伸生成：

立即学习“Java免费学习笔记（深入）”；

const center = { x: this.x + this.width / 2, y: this.y + this.height / 2 };const halfFov = Math.PI / 6; // 30° for 60° total FOVconst 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();

⚠️ 注意事项：