如何使用HTML5 Canvas而不是Debug Draw绘制我的Box2D世界？

Question

我非常了解HTML5画布，我知道使用循环等的基础和动画。

我正在使用的演示:(点击制作形状）http://henry.brown.name/experiments/box2d/example-canvas.html

我不太熟悉的是Box2D。我正在使用Box2DWeb端口，我听说它比Box2D-js更新，我不确定哪个最好。

我知道如何初始化'世界'，我可以在世界上放置物体。然后我使用Step来动画世界 - 但是到目前为止我只能在屏幕上显示它，因为它基本上可以为你完成所有事情。

我不想使用调试绘图，而是使用画布来绘制，例如汽车而不仅仅是方形。如何将正方形的物理特性附加到汽车图像上？我只是不知道如何将画布与Box2D整合在一起。

任何提示都将受到大力赞赏！

由于

Answer 1

我花了最后几天尝试同样的事情。 我找到Jonny Strömberg's tutorial，这不是超级细节，但通过分析代码，我发现他如何检索身体的位置：

var b = world.GetBodyList()

GetBodyList（）似乎是一个迭代数组，因此可以通过b.m_next访问下一个主体。

然后您可以使用

b.GetPosition().x
b.GetPosition().y
b.GetAngle()

检索身体的坐标。

编辑：此代码适用于Box2dweb库，我发现它比Box2djs更好记录

Answer 2

如果您不熟悉Box2D，请查看http://www.kyucon.com/doc/box2d/处的文档。这应该告诉您所需的所有属性。据我所知，使用Box2D的标准方法是使用userData附加图像。有关图像和Canvas图像使用情况，请参阅此示例教程。

http://www.jeremyhubble.com/box2d.html

Answer 3

我有同样的问题。 here是它的文档。 你可以使用像GetBodyList()，GetAngle()这样的调用和像m_position之类的成员来获得绘制任何你想要在画布上使用的库所需的所有内容。