html - 如何在不损失性能的情况下添加大量圈子？

Question

当我使用 createljs 构建我的模拟器时，我需要有数千个小圆圈（直径 3 像素）。我可以在形状图上画一个圆圈，这是推荐的方法吗？还是我应该使用位图？

关于性能方面的最佳方式的任何想法？

另外，是否可以打开或关闭文本抗锯齿？

Answer 1

您可以查看以下文章以阅读有关优化画布的信息。

http://www.html5rocks.com/en/tutorials/canvas/performance/

在本文中，我们展示了使用画布的不同渲染技术

关于 easeljs adobe 为从 AS3 过渡到 HTML5 的开发人员提供了指南：

http://blogs.adobe.com/digitalmedia/2011/01/getting-started-with-the-canvas-element-and-easeljs/

在本文中展示了如何从以前的对象定义创建一个新的 Shape 实例。

Answer 2

如果您正在寻找性能，请考虑使用 缓存您的形状Shape.cache(x,y,w,h)，这在大多数浏览器中提供了一些好处。查看 EaselJS Git 存储库中的缓存演示。请注意，Safari 6 在该示例中具有相反的效果（缓存速度较慢），因为 Safari 已经对图形进行了出色的优化，并且在 GPU 上处理大量小对象时效果不佳。

如果您的形状随着时间的推移发生很大变化，那么缓存可能不是一个好的选择。