实现 2.5D 效果：在 HTML5 Canvas 中基于相机旋转对齐精灵位置

9次阅读

本文详解如何在纯 JavaScript 的 2D Canvas 中实现“伪 3D”（2.5D）效果，核心是通过三角函数将世界坐标转换为相机视角下的相对坐标，确保精灵始终面向相机（billboarded），不依赖 ctx.rotate()。

本文详解如何在纯 javascript 的 2d canvas 中实现“伪 3d”（2.5d）效果，核心是通过三角函数将世界坐标转换为相机视角下的相对坐标，确保精灵始终面向相机（billboarded），不依赖 `ctx.rotate()`。

在 2.5D 渲染中，“2D 绘制 + 3D 感知”是关键——所有精灵仍以 2D 方式绘制（如 drawImage），但其屏幕位置需根据虚拟相机的朝向动态重算，使其视觉上“固定朝向镜头”，即 billboard 效果。这与直接调用 ctx.rotate() 有本质区别：后者会旋转图像本身（破坏朝向），而前者仅平移绘制坐标，保持精灵始终正对观察者。

核心原理：极坐标视角变换

假设世界中某精灵位于全局坐标 (worldX, worldY)，相机位于 (camX, camY)，且相机朝向角度为 camAngle（单位：弧度，0° 指向右，逆时针递增）。我们需计算该精灵在相机“前方平面”上的投影位置（即人眼所见的相对位置）：

求相对偏移向量：

const dx = worldX - camX; const dy = worldY - camY;

转为极坐标（距离 + 相对角度）：

const distance = Math.sqrt(dx * dx + dy * dy); const angleFromCam = Math.atan2(dy, dx); // 注意：atan2(y,x) 返回 [-π, π]

叠加相机朝向，得到最终屏幕方向角：

const screenAngle = angleFromCam - camAngle; // 关键：减去相机朝向，实现“相对视角”

反解为屏幕坐标（以画布中心为原点）：

const screenX = canvas.width / 2 + distance * Math.cos(screenAngle); const screenY = canvas.height / 2 + distance * Math.sin(screenAngle);

✅ 为什么是 angleFromCam – camAngle？
因为相机自身旋转了 camAngle，世界坐标系需“反向旋转”才能对齐相机局部坐标系。这是坐标系变换的本质：将点从世界空间变换到相机空间。

完整示例代码

<canvas id="gameCanvas" width="800" height="600"></canvas> <script> const canvas = document.getElementById('gameCanvas'); const ctx = canvas.getContext('2d');  // 场景数据 const sprites = [{ x: 50, y: 40, img: createPlaceholder(32, 32, '#4a90e2') },   {x: 20, y: 70, img: createPlaceholder(32, 32, '#e74c3c') } ]; const camera = {x: 0, y: 0, angle: degToRad(35) }; // 35° 角度需转为弧度  function degToRad(d) {return d * Math.PI / 180;}  function createPlaceholder(w, h, color) {const temp = document.createElement('canvas');   temp.width = w; temp.height = h;   const tctx = temp.getContext('2d');   tctx.fillStyle = color; tctx.fillRect(0, 0, w, h);   return temp; }  function render() {   ctx.clearRect(0, 0, canvas.width, canvas.height);    sprites.forEach(sprite => {     // 步骤 1：计算相对于相机的偏移     const dx = sprite.x - camera.x;     const dy = sprite.y - camera.y;      // 步骤 2：极坐标转换     const dist = Math.sqrt(dx * dx + dy * dy);     const relAngle = Math.atan2(dy, dx);      // 步骤 3：转换到相机局部坐标系     const screenAngle = relAngle - camera.angle;      // 步骤 4：映射到屏幕（以画布中心为参考点）const screenX = canvas.width / 2 + dist * Math.cos(screenAngle);     const screenY = canvas.height / 2 + dist * Math.sin(screenAngle);      // 绘制（始终正向，无旋转）ctx.drawImage(sprite.img, screenX - 16, screenY - 16);   }); }  // 启动渲染循环 requestAnimationFrame(() => {   render(); }); </script>