基于2D Canvas的原生JS 2.5D相机旋转坐标转换问题咨询

要解决这个问题，核心是将世界坐标下的精灵位置，通过旋转变换转换到相机视角的局部坐标系，同时保持精灵自身不旋转（广告牌式特性）。以下是具体步骤和代码实现：

核心原理 #

相机旋转θ角时，世界中的物体相对于相机的位置，等价于将物体坐标绕相机位置反向旋转θ角（即旋转-θ）。我们需要手动完成这个坐标变换，而非依赖context.rotate（会旋转所有元素，破坏广告牌效果）。

具体步骤 #

1. 角度转弧度：JavaScript的Math库使用弧度计算，需先将相机的角度（如35deg）转换为弧度。
2. 计算相对偏移：先算出精灵相对于相机世界位置的偏移量（若相机在原点，此步可省略）。
3. 旋转变换：用旋转矩阵计算转换后的相机空间坐标。
4. 屏幕映射：将相机空间坐标映射到Canvas屏幕（通常需加上画布中心偏移，让相机位于屏幕中心）。

代码实现 #

// 相机参数
const camera = {
    x: 0,          // 相机世界X坐标（示例设为原点）
    y: 0,          // 相机世界Y坐标
    angleDeg: 35   // 相机旋转角度（0-360deg）
};

// 精灵列表
const sprites = [
    { x: 50, y: 40 },
    { x: 20, y: 70 }
];

// Canvas参数
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const screenCenterX = canvas.width / 2;
const screenCenterY = canvas.height / 2;

// 角度转弧度
const angleRad = (camera.angleDeg * Math.PI) / 180;
const cos = Math.cos(angleRad);
const sin = Math.sin(angleRad);

// 遍历精灵计算屏幕位置并绘制（假设你有一个spriteImage对象）
sprites.forEach(sprite => {
    // 1. 计算精灵相对于相机的世界偏移
    const dx = sprite.x - camera.x;
    const dy = sprite.y - camera.y;

    // 2. 应用反向旋转变换，得到相机空间坐标
    const camX = dx * cos + dy * sin;
    const camY = -dx * sin + dy * cos;

    // 3. 映射到屏幕坐标（相机位于屏幕中心）
    const screenX = screenCenterX + camX;
    const screenY = screenCenterY + camY;

    // 4. 绘制广告牌式精灵（不旋转，直接绘制原始图）
    ctx.drawImage(spriteImage, screenX - spriteImage.width/2, screenY - spriteImage.height/2);
});

关键公式说明 #

旋转变换的核心公式（将世界相对偏移转换为相机空间坐标）：

camX = dx * cosθ + dy * sinθ
camY = -dx * sinθ + dy * cosθ

• dx/dy：精灵相对于相机的世界坐标偏移
• θ：相机旋转的弧度值
• 这个公式本质是对坐标点执行顺时针旋转θ角，等价于相机逆时针旋转θ角后的视角效果。

拓展说明 #

• 如果需要添加2.5D透视效果（比如远处精灵更小），可以基于camX（相机空间的X轴可模拟深度）计算缩放比例：scale = 1 / (1 + camX * 0.01)，再用该比例缩放精灵的绘制大小。
• 若相机有移动，只需更新camera.x和camera.y，变换逻辑保持不变。

内容的提问来源于stack exchange，提问作者noon