一個小的Demo

http://jsfiddle.net/qAjPt/

Box2D是一個用於模擬2D剛體物體的C++引擎。作者為Erin Catto。Box2D使用zlib許可。zlib許可是一個自由軟體授權協議，但並非copyleft。

它已被用於蠟筆物理學、憤怒的小鳥、Rolando、Fantastic Contraption、Incredibots、Tiny Wings、Transformice、Happy Wheels等遊戲的開發，[3]對於iPhone、iPad和Android遊戲，可以使用Cocos2d遊戲引擎和Corona Framework。

百度百科：http://baike.baidu.com/link?url=u0_cLX42FXa3Tt8q6QvSS8VcCHJcFu4Fmk_BIJhWz4DXpU_UMK7DZHi1Ab8qXuaWyICyr1bQtdmSw72BER13Rq

Box2D分為box2d-flash和box2d-js，下面主要說box2d-js

畫矩形

var Shape3 = new b2BoxDef();    //Shape3:矩形
    Shape3.extents.Set(300, 5);         //定義矩形高、寬
    Shape3.userData = "#000";
    var BodyDef = new b2BodyDef();
    BodyDef.position.Set(200, 500);    //設定物體的初始位置
    BodyDef.AddShape(Shape3);          //物體中加入Shape3
    world.CreateBody(BodyDef);
 

和canvas不同的是，box2d的形狀，需要先定義物體，然後定義形狀，

把物體裝進形狀，在此時可以新增box2d的屬性，例如彈性，摩擦力等

，然後用canvas原生方法把圖形畫出來。

這個可以當作庫方法來使用，用來畫形狀

function drawJoint(joint, context) {
    var b1 = joint.m_body1;
    var b2 = joint.m_body2;
    var x1 = b1.m_position;
    var x2 = b2.m_position;
    var p1 = joint.GetAnchor1();
    var p2 = joint.GetAnchor2();
    context.strokeStyle = '#000';
    context.beginPath();
    switch (joint.m_type) {
    case b2Joint.e_distanceJoint:
        context.moveTo(p1.x, p1.y);
        context.lineTo(p2.x, p2.y);
        break;

    case b2Joint.e_pulleyJoint:
        // TODO
        break;

    default:
        if (b1 == world.m_groundBody) {
            context.moveTo(p1.x, p1.y);
            context.lineTo(x2.x, x2.y);
        }
        else if (b2 == world.m_groundBody) {
            context.moveTo(p1.x, p1.y);
            context.lineTo(x1.x, x1.y);
        }
        else {
            context.moveTo(x1.x, x1.y);
            context.lineTo(p1.x, p1.y);
            context.lineTo(x2.x, x2.y);
            context.lineTo(p2.x, p2.y);
        }
        break;
    }
    context.stroke();
}
function drawShape(shape, context) {
    
    
    context.fillStyle = shape.m_userData;
    context.beginPath();
    switch (shape.m_type) {
    case b2Shape.e_circleShape:
        {
            var circle = shape;
            var pos = circle.m_position;
            var r = circle.m_radius;
            var segments = 16.0;
            var theta = 0.0;
            var dtheta = 2.0 * Math.PI / segments;
            // draw circle
            context.moveTo(pos.x + r, pos.y);
            for (var i = 0; i < segments; i++) {
                var d = new b2Vec2(r * Math.cos(theta), r * Math.sin(theta));
                var v = b2Math.AddVV(pos, d);
                context.lineTo(v.x, v.y);
                theta += dtheta;
            }
            context.lineTo(pos.x + r, pos.y);
    
            // draw radius
            context.moveTo(pos.x, pos.y);
            var ax = circle.m_R.col1;
            var pos2 = new b2Vec2(pos.x + r * ax.x, pos.y + r * ax.y);
            context.lineTo(pos2.x, pos2.y);
        }
        break;
    case b2Shape.e_polyShape:
        {
            
            var poly = shape;
            var tV = b2Math.AddVV(poly.m_position, b2Math.b2MulMV(poly.m_R, poly.m_vertices[0]));
            context.moveTo(tV.x, tV.y);
            for (var i = 0; i < poly.m_vertexCount; i++) {
                var v = b2Math.AddVV(poly.m_position, b2Math.b2MulMV(poly.m_R, poly.m_vertices[i]));
                context.lineTo(v.x, v.y);
            }
            context.lineTo(tV.x, tV.y);
        }
        break;
    }
    context.fill();
}