赵工的个人空间

使用Box2D物理引擎时，常常需要设置一定场景和物体、人物等，这时要在标准的Box2D几何体上加载一张表示物体、人物等的图片，覆盖住几何体原貌。
为了加载图片，先要在网页中加入一个<img/>标记，引入一张照片，<img/>标记加入一个id属性值。示例：
<img id="sprit" src="sprit.png"/>
然后在JavaScript代码中，创建一个物体时，其中有一个userData属性，需要使用到这个id属性值。示例：
var bodyDef=new b2BodyDef;
bodyDef.type=b2Body.b2_dynamicBody;
bodyDef.position.x=50/scale;
bodyDef.position.y=150/scale;
bodyDef.userData=document.getElementById("sprit");
var body=world.CreateBody(bodyDef);

这样设置后，物体body中的userData就加载了图片所包含的数据，然后就可以在显示时加载图片数据了。因为在显示物体时，Box2D有GetUserData()方法，其中有代码：
for(var b = world.m_bodyList; b != null; b = b.m_next){
  if(b.GetUserData()){
    context.save();
    context.translate(b.GetPosition().x*scale,b.GetPosition().y*scale);
    context.rotate(b.GetAngle());
    context.rotate(0);
    context.drawImage(b.GetUserData(),-b.GetUserData().width/2,-b.GetUserData().height/2);
    context.restore();
  }
}
代码中查询加载的物体列表，其中会加载每个物体的userData，并显示出来。
当然，为了避免<img/>标记中的图片显示到页面中，需要使用CSS将此<img/>设置为不显示，代码为：
#sprit{
  display:none;
}