HTML5画布性能增强

我正在做一个javascript canvas游戏，我想提高游戏的性能。我正在阅读一些关于如何实现更好性能的文章 - 一种技术是预渲染。HTML5画布性能增强

是否有意义渲染每对象，每个都有纹理，以它自己的独立的canvas元素？这里是一个实体，我渲染的例子：（

fruitless.ctx.save(); 
     fruitless.ctx.translate(this.body.GetPosition().x,this.body.GetPosition().y); 
     fruitless.ctx.rotate(this.body.GetAngle()); 
     fruitless.ctx.scale(this.scale.x, this.scale.y); 

     fruitless.ctx.drawImage(this.texture, ...) 
     this.face.draw(); 
    fruitless.ctx.restore();

所以基本上我运行的drawImage（）函数中的每个迭代...预渲染表明，这种的drawImage（）应在初始化完成只有一次） - 是对的吗？

来源

2013-05-19 Jackson

我总是推荐以下文章：[提高HTML5画布性能]（http://www.html5rocks.com/en/tutorials/canvas/performance/）。 –

很难给出具体建议，不知道更多...但这里有一个开始：

把任何静态背景元素在HTML图像和先打好的形象了。如果背景图像是静态的，但大于游戏视口，则滚动该背景图像。
当动画元素需要动画到多个组中时，对动画元素进行排序。因此，在第5帧上制作动画的太阳和云元素将成为一个组。一个葡萄人和存在的人为每个框架设置动画将会处于不同的组中。为这几个组中的每一个创建一个画布。
在sprite-sheet上放置很少的动画元素。
将经常动画的元素放入自己的图像对象中。
将经常重新构造的元素置于其自己的屏幕外画布中并在那里重新纹理。这是一个交易：帆布在手机上的操作很差，所以你不需要在手机上放置很多画布。但是，将所有纹理变体预渲染为图像对象会占用大量内存。

底线：

预渲染无疑会给你的性能提升。

但你需要测试不同的预渲染策略，看看哪个最适合在哪个设备

来源

2013-05-19 19:00:17 markE

谢谢马克。我肯定需要修复一些我的静态背景图像...其中一些是1000px宽 – Jackson

@杰克逊：我想补充一点：你需要测试各种**优化策略和渲染方法**，看看哪些作品最好在哪个设备上。某些优化在某些浏览器中无法按预期工作，某些渲染方法可能会降低性能。例如，在许多移动浏览器中，使用'context.fillText'在画布上绘制文本是ULTRA SLOW。如果您使用任何预渲染技术，那么在这种情况下您会注意到性能提升。 –

要回答这个问题：是否有意义

渲染每一个对象，每个它有一个纹理，它是它自己独立的画布元素？下面是我正在渲染的一个实体的示例：

那么，这取决于。那里有多少？他们在做什么？

如果他们全部都在呼啸而过，那么不妨将它们全部放在同一个画布元素上，而不管这些元素是否会一致更新。

如果有些是静态的，将它们分组。

您的目标是尽可能少地拨打drawImage来电，因为这相当昂贵。

另外，从广义上讲，将微观优化保留到最后是个好主意。

来源

2013-05-20 03:47:49 Jarrod

HTML5画布性能增强

回答

相关问题