绘制大量的六边形并扭曲它们

Question

我正在开始一个网络游戏，我想知道最好的方法。

游戏是从上面看到的六边形区域，可以旋转/倾斜。

最好的方法是什么？我要做的是使用画布并使用2D变换来模拟3d旋转，问题是：

1. 游戏必须适用于智能手机
2. 对于每次旋转我必须重绘所有画布，并且屏幕上可能有200个六边形重绘多次，所以我认为画布在资源方面太贵......

Answer 1

我能想到两种方式：

• 仅使用画布。这意味着相当广泛的浏览器支持，几乎没有怪癖，通常“只是工作”。潜在问题：像你提到的低端机器上的性能。但是将游戏转变为游戏玩法至关重要吗？如果没有，你可以考虑在慢速智能手机上关闭它。如果对游戏玩法不重要，用户很可能不会错过该功能。

• canvas和CSS3转换的组合（rotating cube example）。可以给你比纯画布解决方案更好的性能。潜在的问题：需要“混合”技术，这总是意味着遇到意想不到的问题或怪癖。

Answer 2

你应该看看www.kineticjs.com

Canvas是绘制100个形状的方法，因为它不像SVG那样为每个路径写入DOM。

它有几个例子，在1000年代以编程方式绘制形状。我最近在这里用它来制作类似的动画：

http://movable.pagodabox.com