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

Question

我相当熟悉HTML5画布，了解基础知识和使用循环等动画。

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

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

我知道如何初始化“世界”，并可以在世界中放置对象。然后我使用Step来使世界动画-但是到目前为止，我只能使用调试绘图使其在屏幕上显示，因为它基本上为您完成所有操作。

我想使用画布而不是调试绘图进行绘制，例如一辆汽车而不仅仅是一个正方形。如何将正方形的物理特性附加到汽车的图像上？我无法将我的思维与将画布与Box2D集成在一起。

任何提示都将非常感激！

谢谢

- Sabai

---

很棒的链接，你会对http://www.uselesspickles.com/jsballs/感兴趣，它与问题无关，但它也是一个很棒的JavaScript物理模拟。 - Ruan Mendes

嗨，我想知道你解决了这个问题吗？我也遇到了同样的问题。我不知道如何访问对象的参数，例如位置、速度和角度。Debug Draw使用所有这些参数来绘制一切。我想知道我们如何直接访问它们。 - batman

非常晚的回复，但是我已经解决了这个问题。我会在其他答案中进行评论。 - Sabai

Answer 1

我最近几天一直在尝试同样的事情。 我发现了Jonny Strömberg的教程，内容并不是非常详细，但是通过分析代码，我找到了他如何获取物体位置的方法：

var b = world.GetBodyList()

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

然后您可以使用

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

获取身体坐标的方法。

编辑：此代码适用于Box2dweb库，我发现其文档比Box2djs更好。

- Thibaut

Answer 2

如果你不熟悉Box2D，你应该查看文档：http://www.kyucon.com/doc/box2d/。这将告诉你所有你需要知道的属性。据我所知，使用Box2D的标准方法是将图像附加到userData上。请参阅此示例教程以了解图像和Canvas图像的用法：http://www.jeremyhubble.com/box2d.html。

- Ash Blue

---

http://www.jeremyhubble.com/box2d.html 最终帮助我找到了解决方案。 我在我的网站 www.henry.brown.name 上进行了新的 Box2D 实验。 - Sabai

Box2D文档非常好，但UI导航可能有些困难。只要警告一下，文档并不像jQuery那样。 - Ash Blue

Answer 3

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

- batman