BOX2D.JS原本只会通过debugDraw()绘制简单的示意图,要使用我们自己定义的物体图片并显示出来则需要通过获取BOX2D.JS调制绘制DrawDebugData数据中相关物体的坐标、角度、大小,然后依此自己绘制图片到页面上的canvas。
以下是参考案例
<html>
<head>
<title>Box2dWeb example</title>
</head>
<body οnlοad="init();">
<canvas id="canvas" width="640" height="480"></canvas>
<!--把图片预先加载隐藏-->
<div id="assets" style="display:none">
<img id="villa" src="villa.png" />
<img id="house" src="house.png" />
</div>
</body>
<script type="text/javascript" src="Box2D.js"></script>
<script type="text/javascript">
function init() {
var b2Vec2 = Box2D.Common.Math.b2Vec2;
var b2AABB = Box2D.Colli