Javascript 如何改变背景中心'；在我的画布上旋转？
我在做一个项目，这将像一个游戏（如GTAV）小地图，但跟踪用户的运动在一个领域。该字段是一个2K图像，用户由一个黑色三角形表示。但三角形位于场的底部，而不是中心。为了旋转背景（当用户旋转时），我使用了这个答案帖子中的代码：，它工作得很好，但是锚的旋转是在中心，我希望它在三角形上，但我无法计算出数学来做它（以一种不打破背景图像边界的方式）。三角形位置为（canvas.width/2，canvas.height-100），旋转的锚定位于（canvas.width/2，canvas.height/2）。下面是一个截图：Javascript 如何改变背景中心'；在我的画布上旋转？,javascript,html,canvas,Javascript,Html,Canvas,我在做一个项目，这将像一个游戏（如GTAV）小地图，但跟踪用户的运动在一个领域。该字段是一个2K图像，用户由一个黑色三角形表示。但三角形位于场的底部，而不是中心。为了旋转背景（当用户旋转时），我使用了这个答案帖子中的代码：，它工作得很好，但是锚的旋转是在中心，我希望它在三角形上，但我无法计算出数学来做它（以一种不打破背景图像边界的方式）。三角形位置为（canvas.width/2，canvas.height-100），旋转的锚定位于（canvas.width/2，canvas.height/2）
const ctx=document.querySelector（'canvas'）.getContext（'2d'）；
const mapImage=新图像（）；
mapImage.onload=开始；
mapImage.src=https://upload.wikimedia.org/wikipedia/commons/thumb/a/ab/Map_of_the_Battle_of_the_Somme%2C_1916.svg/1568px-地图，地图，地图，地图，地图，地图，地图，地图，地图，地图，地图，地图，地图，地图，地图，地图，地图，地图，地图，地图，地图，地图，地图，地图，地图，地图，地图；
//楔形左指
const playerPath=new Path2D（）；
playerPath.lineTo（15,0）；
playerPath.lineTo（-15,10）；
playerPath.lineTo（-15，-10）；
playerPath.closePath（）；
函数start（）{
常量键={}；
康斯特玩家={
x:mapImage.width/2，
y:mapImage.height/2，
turnVel:Math.PI/2，//1/4转/秒
目录：-Math.PI/2，
音量：10，//10单位/秒
};
然后设=0；
函数渲染（现在）{
现在*=0.001；//转换为秒
常数deltaTime=现在-那时；
然后=现在；
resizeCanvasToDisplaySize（ctx.canvas）；
clearRect（0，0，ctx.canvas.width，ctx.canvas.height）；
设turnDir=0；
如果（键[37]）{
turnDir=-1；
}否则，如果（键[39]）{
turnDir=1；
}
player.dir+=player.turnVel*turnDir*deltaTime；
player.x+=Math.cos（player.dir）*player.vel*deltaTime；
player.y+=Math.sin（player.dir）*player.vel*deltaTime；
ctx.save（）；
{
//将原点移动到画布的底部中心
ctx.translate（ctx.canvas.width/2，ctx.canvas.height*0.9）；
ctx.save（）；
{
//旋转球员对面的原点
//-Math.PI/2是因为上面的代码添加了方向
//速度为dir=0表示向东。
//我们要面对地图。向上是-Math.PI/2
//所以当上升时，我们需要这里的旋转为0。（不旋转）
ctx.rotate（-player.dir-Math.PI/2）；
//根据玩家的位置移动原点
ctx.translate（-player.x，-player.y）；
ctx.drawImage（mapImage，0,0）；
//在这里画敌人或目标。它们在地图坐标中
//范例
ctx.fillStyle='红色'；
对于（设y=0；y{
键[e.keyCode]=真；
});
window.addEventListener（'keyup'，（e）=>{
密钥[e.keyCode]=假；
});
函数resizeCanvasToDisplaySize（画布）{
const width=canvas.clientWidth；
常数高度=canvas.clientHeight；
const needResize=canvas.width！==width | | canvas.height！==height；
如果（需要调整大小）{
画布宽度=宽度；
canvas.height=高度；
}
返回需要调整大小；
}
} body{margin:0；}
画布{宽度：100vw；高度：100vh；显示：块；}
#信息{
位置：绝对位置；
左：1米；
顶部：1米；
颜色：白色；
背景：rgba（0,0,0,0.5）；
填充：0.5em；
}
使用光标左/右requestAnimationFrame