移动HTML Canvas元素的"相机"

Jem*_*Jem 3 html5 camera canvas offset pan

我正试图找到一种干净的方法来"移动画布元素的相机".

这适用于我的原型游戏(侧卷轴).我很乐意认为有一个更好的解决方案,而不是移动整组节点来模拟移动的"相机".

几乎可以肯定已经阅读了一个简单的操作方法(使用偏移?)但事实上我没有发现任何类似的东西开始引起怀疑......我想象中读到了吗??

谢谢你帮我澄清...... J

Sim*_*ris 9

想必你每秒重绘整个游戏场景30次(或多或少)

您需要重绘整个游戏场景,但首先要通过一些偏移来翻译Canvas上下文.

context.translate(x,y)正是你想要的.你要对使用的是还有阅读起来save()restore()方法.

翻译上下文时,之后绘制的所有内容都会移动该数量.

所以你不断用50,50画一些东西(也许是一个敌人)drawImage(badguy,50,50).然后,玩家移动,从而改变了xtranslate(因为玩家移动到右)为-1而不是0您还吸取敌人精灵与命令drawImage(badguy,50,50),但是当你画出它的敌人显示出来,好像它是在49,50因为context.translate(-1,0)命令在绘制之前移动了所有内容.

当然,当你进入表演时,你会希望确保你只画出可以在屏幕上看到的东西!如果你的水平远远低于水平context.translate(-2000,0),你不想再以50,50绘制物体,只有那些与可视区域相交的物体.