javascript画布中的ctx.rotate（）

所以我试图创建小行星游戏，但我遇到了ctx.rotate（）的问题

我正在根据鼠标位置旋转播放器（三角形），但是当我想检测播放器是否真的与小行星碰撞时，它会做一些奇怪的事情，如果我重写下面的代码而不使用

ctx.rotate

和

ctx.translate

和

ctx.restore

，那么它工作得很好，但不考虑球员的轮换。如果我用

ctx.rotate

和

ctx.translate

和

ctx.restore

进行计算，并将ctx.restore放在下面代码的最后一行，它的计算会有点奇怪，因为它也会旋转小行星，如果我保持原样，它的工作原理与第一种情况相同。有人知道解决办法吗？如果有，你能帮我吗？ 我还应该说，我在三角形中画了三个点，如果小行星碰到其中一个点，那么这就是游戏的结束

ctx.save()
ctx.translate(player.position.x, player.position.y)
ctx.rotate(player.angle + 1.57)
ctx.translate(-player.position.x, -player.position.y)
let dX = asteroids[i].position.x - player.position.x
let dY = asteroids[i].position.y - player.position.y
let d = Math.sqrt((dX * dX) + (dY * dY));
let dX2 = asteroids[i].position.x - (player.position.x + 20)
let dY2 = asteroids[i].position.y - (player.position.y + 40)
let d2 = Math.sqrt((dX2 * dX2) + (dY2 * dY2));
let dX3 = asteroids[i].position.x - (player.position.x - 20)
let dY3 = asteroids[i].position.y - (player.position.y + 40)
let d3 = Math.sqrt((dX3 * dX3) + (dY3 * dY3));
ctx.restore()
ctx.strokeStyle = "white"
if (d <= asteroids[i].size || d2 <= asteroids[i].size || d3 <= asteroids[i].size) {
endgame = true
        }

ctx.save（）
ctx.translate（player.position.x，player.position.y）
ctx.旋转（播放器角度+1.57）
ctx.translate（-player.position.x，-player.position.y）
设dX=小行星[i].position.x-player.position.x
设dY=小行星[i].position.y-player.position.y
设d=Math.sqrt（（dX*dX）+（dY*dY））；
设dX2=小行星[i].position.x-（player.position.x+20）
设dY2=小行星[i]。位置.y-（玩家位置.y+40）
设d2=Math.sqrt（（dX2*dX2）+（dY2*dY2））；
设dX3=小行星[i].position.x-（player.position.x-20）
设dY3=小行星[i]。位置.y-（玩家位置.y+40）
设d3=Math.sqrt（（dX3*dX3）+（dY3*dY3））；
ctx.restore（）
ctx.strokeStyle=“白色”
如果（d）