HTML5 Canvas 2D Camera并且只在屏幕上呈现内容?

时间:2012-05-25 18:53:06

标签: javascript html5 canvas

我目前正在开发一款游戏,它非常简单而且非常小巧。但我真的希望某些级别大于视口的实际大小。例如,我的画布大小是740x440,但实际上我想要一个真正像2000x440的级别。

所以我尝试使用.translate()方法模拟基本的2D相机。它工作正常,但性能非常糟糕,可能是因为我现在正在渲染所有内容。

.translate()是否可行?如果是这样,那么渲染只能被相机查看的东西的好方法是什么?

1 个答案:

答案 0 :(得分:0)

你应该考虑“层”,它们是多个相互叠加的画布。这样,每个动画每层都是独立的。

假设您有一个在视口内移动但不会移开景观的角色。您可以将角色放在一个图层中,将横向放在另一个图层中,并仅为角色图层设置动画。这样,只重绘了角色而不是整个场景。