Javascript 在HTML5画布和JS游戏中，当一个'；s已旋转，另一个未旋转'；T

我一直在做一个类似蠕虫克隆的游戏。在游戏中，玩家用上下键旋转一门大炮（这是一个2D游戏），向来自上方的敌人开火。我在绘制大炮时使用

context.rotate（）

和

context.translate（）

方法，然后立即

context.restore（）

返回默认画布。大炮是唯一旋转的东西（目前）

---

问题是，我想准确地显示从大炮顶部射出的炮弹。为此，我需要随时知道加农炮的顶部坐标。通常，这是我可以很容易计算出来的。但是，由于画布仅在绘制加农炮之前旋转，因此并不简单。

只需使用简单的三角法来跟踪顶部：

var canonTopX = pivotX + Math.cos(angleInRadians) * canonLength;
var canonTopY = pivotY + Math.sin(angleInRadians) * canonLength;

当然，您可以选择使用变换渲染佳能，也可以共享数学

ctx.translate(pivotX, pivotY);
ctx.rotate(angleInRadians);
//render canon from (0,0) pointing right (0°)
ctx.setTransform(1,0,0,1,0,0);    // instead of save/restore

// calc canon top for projectiles here

var ctx=c.getContext（“2d”）；
长度=70；
var角半径=0；
var angleStep=0.03；
var pivotX=ctx.canvas.width>>1；
var pivotY=ctx.canvas.height>>1；
ctx.fillStyle=“#000”；
ctx.strokeStyle=“#c00”；
（函数循环（）{
角度半径+=角度步长；
render（）；
请求动画帧（循环）；
})();
函数render（）{
clearRect（0,0，ctx.canvas.width，ctx.canvas.height）；
ctx.translate（pivotX，pivotY）；
ctx.旋转（角半径）；
ctx.fillRect（0，-5，佳能长度，10）；
setTransform（1,0,0,1,0,0）；//而不是保存/还原
var canonTopX=数据透视X+数学cos（角半径）*数据长度；
var Cannotopy=枢轴+数学正弦（角度半径）*长度；
ctx.beginPath（）；
ctx.arc（canonTopX，canonTopY，9,0,6.3）；
ctx.stroke（）；
}

---

就是这样！谢谢！三角学从来都不是我最好的学科，而且是很久以前的事了。