canvas坐标转换屏幕坐标_HTML5canvas:旋转后获取矩形坐标(相对于屏幕)

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(); } }

上面的代码包含两个方法,它们描述了一个管理项目符号的绘制和更新的类。 更新方法沿着一个项目符号移动,然后绘制函数将其绘制到屏幕上。

canvas执行以下操作:

保存当前的canvas上下文状态

将上下文移动到子弹始发的位置

将canvas旋转到子弹击中时的方向

绘制矩形

将canvas上下文恢复到原始状态

下面是我所做的一个图像,更好地描述了canvas上下文在做什么:

所以我们知道子弹的x位置,但是这与旋转的上下文相关。 我需要知道的是子弹的X和Y属性与实际屏幕的关系。 任何想法,我怎么能做到这一点?

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值