Javascript 将场景分成几张画布，还是继续重画一张？
打算用javascript创建一个基于画布的游戏，我站在一个选择面前： 在性能方面，我应该将屏幕上发生的所有内容保存在一个画布中（所有移动的角色、精灵），并以恒定的速率（比如60 FPS）重新绘制，还是应该将场景分割为几个较小的画布，从而消除对场景重复绘制的需要？我甚至可以为角色的肢体创建单独的画布元素，然后通过简单地操纵给定画布元素（旋转、定位、不透明度）的CSS来完成大部分动画 对我来说，后者听起来更合理，更容易实现，但它是否也更快？另外，我是否应该使用SVG，将字符和精灵作为元素保存在其中，并直接操作它们的XML和CSS属性 那么，对于一个有多个精灵和角色的场景，你认为最合适的解决方案是什么Javascript 将场景分成几张画布，还是继续重画一张？,javascript,canvas,svg,vector-graphics,html5-canvas,Javascript,Canvas,Svg,Vector Graphics,Html5 Canvas,打算用javascript创建一个基于画布的游戏，我站在一个选择面前： 在性能方面，我应该将屏幕上发生的所有内容保存在一个画布中（所有移动的角色、精灵），并以恒定的速率（比如60 FPS）重新绘制，还是应该将场景分割为几个较小的画布，从而消除对场景重复绘制的需要？我甚至可以为角色的肢体创建单独的画布元素，然后通过简单地操纵给定画布元素（旋转、定位、不透明度）的CSS来完成大部分动画 对我来说，后者听起来更合理，更容易实现，但它是否也更快？另外，我是否应该使用SVG，将字符和精灵作为元素保存在其中
- 一个画布对象以FPS速率手动（且浪费）重新绘制
- 几个画布元素，以更合理的方式手动重新绘制
- 通过DOM操作SVG/VML等结构化矢量图形文档
我主要关心的是性能差异，但背后逻辑代码的易读性也很重要（例如，我之前已经使用过canvas，我相当确定整个canvas的重画功能将是一个难以维护的脚本），在速度出现问题之前，千万不要尝试优化某个东西。你会花更多的时间去尝试如何以最好的方式编码，而不是实际编码，而且永远不会完成任何事情
以固定的速率在画布上绘制它们。就是这样做的。如果您开始为每个肢体和元素创建画布，并使用CSS对其进行操作，那么您就浪费了画布的潜力。不妨只使用图像。那是他们在画布之前做的。这就是画布要解决的问题
如果你遇到过速度问题，那么你可以开始着手解决。有关一些提示（）。还有一些关于画布性能的实用技巧。与GPU加速的画布操作相比，DOM操作速度较慢，因此我将远离SVG和VML 就构建画布代码而言，清除并重新绘制整个画布毫无意义（特别是出于性能原因），因为玩家移动或执行了一个动作。根据你在这里的描述，我猜你的游戏将是2D。这些类型的游戏非常适合分层，除非你正在做一些相当复杂的事情，比如纸马里奥。您应该从面向对象的角度来看待这个问题，并根据需要将绘图过程和对象封装在一起 例如，创建一个维护代表角色的小画布的播放器对象。维持角色状态所需的所有逻辑都保存在对象中，对其所做的任何更改都不必担心游戏视觉表现的其他组件。同样，对后台、用户界面和任何其他可以抽象到层中的内容（在合理范围内）也要这样做。例如，如果你在做视差游戏，你可能有一个
前景背景角色用户界面最终，您需要单独维护游戏中不同组件的状态。玩家动画、背景云移动、树木摇摆等都将由适当的对象管理。因为您已经有了这种类型的代码结构设置，所以在单独的画布元素上维护主要组件并根据需要将它们组合在一起以获得更好的性能是有意义的。如果角色在具有静态背景的场景的左下角移动，则无需重新绘制右上角（或场景的95%）。如果您考虑的是全屏功能，这肯定是一个性能问题。“编程中有一条规则，在速度出现问题之前，您不应该尝试优化某些东西。”-正如我所说，这不仅仅是性能问题。我非常确信，分离这些内容会使代码更加透明。“还不如使用图像。”-我实际上打算这样做-考虑
drawImage（）drawImage（）