在javascript中创建基于画布的游戏的意图我站在选择之前：
我是否应该在一个画布（所有移动的角色，精灵）中保持屏幕上发生的所有内容，并以60 FPS的恒定速率重绘它，或者我应该将场景分成几个较小的画布因此无需重新绘制场景？我甚至可以为角色的四肢创建单独的画布元素，然后通过简单地操纵给定画布元素的CSS（旋转，定位，不透明度）来完成大部分动画。
对我来说，后者听起来更合理，更容易实现，但它还更快吗？另外，我不应该使用SVG，将字符和精灵保留在其中并直接操作它们的XML和CSS属性？
那么您认为对于具有多个精灵和角色的场景最合适的解决方案是什么：
我主要关注的是性能差异，但是后面逻辑代码的易读性也很有意义（我之前已经使用过canvas，例如我相当确定整个画布的重绘功能是一个难以维护的剧本兽。）
答案 0 :(得分：1)
编程中有一条规则，在速度问题出现之前，不应该尝试优化某些东西。你会花更多的时间来弄清楚如何用最好的方式编写代码而不是实际代码，并且永远不会完成任何事情。
以固定的速率在画布上绘制所有内容。这就是它的完成方式。如果你开始为每个肢体和元素创建一个画布并使用CSS操纵它们，那么你就会浪费画布的潜力。不妨只使用图像。这就是他们在画布之前做到的。这就是画布要解决的问题。
如果您遇到速度问题，那么您可以开始锤击它们。 Check out these slides了解一些提示（related video）。 This guy's blog还有关于画布性能的一些方便提示。
答案 1 :(得分：1)
与GPU加速的画布操作相比，DOM操作速度较慢，因此我会远离SVG和VML。
就构建画布代码而言，由于玩家移动或执行了一个动作，因此清除和重新绘制整个画布当然没有意义（特别是出于性能原因）。根据你在这里的描述，我猜你的游戏将是2D。这些类型的游戏非常适合分层，除非你做的事情像Paper Mario那样复杂。您应该从面向对象的角度来看问题，并在适当的时候将绘图过程和对象封装在一起。
例如，创建一个播放器对象，该对象维护一个代表该角色的小画布。维持角色状态所需的所有逻辑都保存在对象中，对其进行的任何更改都不必担心游戏视觉表现的其他组成部分。同样，对背景，用户界面以及可以抽象到图层中的任何其他内容（在合理范围内）执行相同的操作。例如，如果您正在进行视差游戏，则可能会有foreground，background，character和user interface图层。
最终，您需要单独维护游戏中不同组件的状态。玩家动画，移动的背景云，树木摇曳等都将由适当的对象管理。由于您已经拥有了这种类型的代码结构设置，因此将主要组件维护在不同的canvas元素上并根据需要将它们组合在一起以获得更好的性能是有意义的。如果角色在具有静态背景的场景的左下角移动，则无需重新绘制右上角（或95％的场景，就此而言）。如果您正在考虑全屏功能，这绝对是一个性能问题。