Javascript 围绕画布中的原点旋转点

我和一个朋友正在制作一个游戏，我们正在制作一个雷达。我们已经做了一个基本的雷达，在这个意义上，所有的东西都显示在适当的位置，但是我们正在尝试增加雷达的旋转。该旋转基于本地玩家角度，该角度从0度开始直接向北，顺时针旋转360度直到再次向北

我想知道如何从本地玩家的角度旋转画布上的所有点（可以是其他玩家、物品等）。我们正努力做到这一点，只要球员向前走，球员也会直接在雷达上向上移动。无论旋转的角度是什么，球员都应该在直接向前行走时“向上”雷达

我试着做基本的轮换，就像这样对每个球员： var baseX=x-localX，baseY=（canvas.height-y）-localY； var localAngle=toRadians（玩家[0]。旋转）

---

问题是，我并不总是“上”雷达，这取决于我在哪里寻找。谢谢。

为了有效地旋转物体，你们需要从线性代数中理解基的概念。简而言之，这意味着您需要两个单独的向量（基本向量），它们为您定义了所有向量（对象）的位置是空间（在您的情况下是2D）。所以，若要旋转场景中的对象，需要对所有对象应用旋转变换。这可能是： （向右旋转）

（向左旋转）

所以它是这样的：

let multiplyMatrixVector = (A, v)  => {
    let C=[]; 
    C[0] = (A[0]*v.x)+(A[1]*v.y)+(A[2]*v.z);   
    C[1] = (A[3]*v.x)+(A[4]*v.y)+(A[5]*v.z);
    C[2] = (A[6]*v.x)+(A[7]*v.y)+(A[8]*v.z);   
    return {x:C[0], y:C[1], z:C[2]};   
}; 


let locations = [{x:34,y:7,z:0}];
let newLocations = map(
                     (location) => {
                        return multiplyMatrixVector(matrix,location)
                     },  
                     locations
                   )

编辑： 若你们不仅想旋转雷达上的点，还想移动它，你们需要应用

translation to your point object in matrix form:
x+a      1 0 a     x
y+b   <- 0 1 b <-  y
1        0 0 1     z 

转换为矩阵形式的点对象：
x+a10ax
y+b欢迎来到StackOverflow！为了帮助我们解决您的编码问题，您需要实际向我们展示您的代码。请更新您的问题，使其在一个列表中显示所有相关代码。有关更多信息，请参阅帮助文章，并采用：）添加了我尝试的内容，但是，我不确定如何满足我的要求，因此提供代码有点困难。您确定我必须使用转换，至少以这种方式来实现我描述的问题吗？我很确定我只是错过了一些小东西。原始问题中的代码使得无论我从哪个角度看，我周围的物品/玩家都是相对于那个方向放置的。唯一的问题是，当我向前走时，我不会在雷达上“向上”。谢谢你的解释，但我不认为有必要这么做。我相信这样做会大大降低复杂性，因为你可以用适当的变换组合映射场景和对象。我明白你们的要求了，你们想和你们的玩家一起移动雷达上的点和玩家模型吗？如果是这样，等一下，我会补充我的答案……呃，我相信我们在同一页上。我只想在我向前移动时，我在雷达上“向上”，所有物品/玩家正确旋转，这意味着如果我在游戏的第一象限看到一个光点，他们应该在我的右边。
Math.cos  Math.sin 0
-Math.sin  Math.cos 0
0          0        1

let multiplyMatrixVector = (A, v)  => {
    let C=[]; 
    C[0] = (A[0]*v.x)+(A[1]*v.y)+(A[2]*v.z);   
    C[1] = (A[3]*v.x)+(A[4]*v.y)+(A[5]*v.z);
    C[2] = (A[6]*v.x)+(A[7]*v.y)+(A[8]*v.z);   
    return {x:C[0], y:C[1], z:C[2]};   
}; 


let locations = [{x:34,y:7,z:0}];
let newLocations = map(
                     (location) => {
                        return multiplyMatrixVector(matrix,location)
                     },  
                     locations
                   )

translation to your point object in matrix form:
x+a      1 0 a     x
y+b   <- 0 1 b <-  y
1        0 0 1     z