HTML5画布：旋转后获取矩形坐标（相对于屏幕）

Question

update: function(delta) {
    for (var i = 0; i < this.bullets.length; i++) {
        this.bullets[i].velocity = this.bullets[i].speed * delta;
        this.bullets[i].contextX += this.bullets[i].velocity;
    }
},

draw: function(ctx) {
    for (var i = 0; i < this.bullets.length; i++) {
        ctx.save();

        // Move the context to where the player is then make it face the target degree
        ctx.translate(this.bullets[i].startX, this.bullets[i].startY);
        ctx.rotate(this.bullets[i].rotation);

        ctx.fillRect(this.bullets[i].contextX, -5, 10, 10);
        ctx.restore();
    }
}

上面的代码包含两个方法，用于描述管理项目符号绘制和更新的类。更新方法移动子弹，然后绘制功能将其绘制到屏幕上。

画布执行以下操作：

1. 保存当前画布上下文状态
2. 将上下文移至子弹源自
的位置
3. 将画布旋转到子弹射击时面对的方式
4. 绘制矩形
5. 将画布上下文还原为原始状态

这是我制作的图片，它更好地描述了画布上下文的作用：



所以我们知道子弹的x位置，但这与上下文相关，因为它已被旋转。我需要知道的是子弹与实际屏幕相关的X和Y属性。关于我如何做到这一点的任何想法？

Answer 1

您可以像这样计算旋转子弹的未转换画布屏幕位置：

此功能使用一些三角法来获得旋转前后的子弹角度，并使用毕达哥拉的方法来计算子弹离玩家的距离。

function bulletXY(playerX,playerY,bulletX,bulletY,rotation){
    var dx=bulletX-playerX;
    var dy=bulletY-playerY;
    var length=Math.sqrt(dx*dx+dy*dy);
    var bulletAngle=Math.atan2(dy,dx);
    var screenX=playerX+length*Math.cos(bulletAngle+rotation);
    var screenY=playerY+length*Math.sin(bulletAngle+rotation);
    return({x:screenX,y:screenY});
}

演示：http://jsfiddle.net/m1erickson/EDk9W/