Your browser does not support the canvas element.

var _container;
    createContainer();
    function createContainer()
    {
        var shapeCoords = [
            [[61,55],[77,67],[39,135],[23,124]],
            [[23,124],[39,135],[25,220],[6,218]],
            [[6,218],[25,220],[44,305],[28,312]],
            [[28,312],[44,305],[94,372],[82,384]],
            [[82,384],[94,372],[167,413],[161,425]],
            [[161,425],[167,413],[250,424],[250,437]],
            [[250,438],[250,424],[339,416],[341,429]],
            
            [[341,430],[339,416],[411,383],[418,393]],
            [[418,393],[411,383],[464,327],[478,334]],
            [[478,334],[464,327],[489,254],[504,252]],
            [[504,252],[489,254],[488,183],[504,177]],
            [[504,177],[488,183],[470,112],[488,103]],
            [[488,103],[470,112],[443,66],[465,63]],
            [[77,67],[72,46],[436,43],[443,66]]
        ];
        //创建一个刚体定义
        var bodyDef = new b2BodyDef();
        bodyDef.type = b2Body.b2_staticBody;
        bodyDef.position.Set(-8 / drawScale, -50/drawScale);
        //创建刚体
        _container = world.CreateBody(bodyDef);
        //为刚体创建修饰物
        //传递顶点数组作为参数
        createFixtrues(shapeCoords);
    };
    //创建Fixtures
    //根据顶点数组的第一维度，创建多个Fixture
    function createFixtrues(coords)
    {
        for(var i = 0; i<coords.length; i++)
        {
            var shape = new b2PolygonShape();
            //调用创建顶点方法，将数组的第二维度作为参数
            //返回一个顶点数组，用于创建shape
            var shapeVertices = createVerticesArray(coords[i]);
            shape.SetAsArray(shapeVertices);
            var shapeFixtureDef = new b2FixtureDef();
            shapeFixtureDef.shape = shape;
            shapeFixtureDef.density = 1;
            shapeFixtureDef.restitution = 1.0;
            _container.CreateFixture(shapeFixtureDef);
        }
    };
    
    //创建顶点数组
    function createVerticesArray(coords)
    {
        //不能少于三个顶点
        if(coords.length < 3)
        {
            throw new Error("Shape create wrong");
        }
        var vertices = new Array();
        //遍历顶点数组的第二维度，生成b2Vec2数组
        for (var i = 0; i<coords.length ; i++)
        {
            var vertice = new b2Vec2(coords[i][0]/drawScale, coords[i][1]/drawScale);
            vertices.push(vertice);
        }
        
        return vertices;
     };  
     

Your browser does not support the canvas element.

canvas.onclick = function(e){

vec.push(new Point(e.offsetX,e.offsetY));
        if(vec.length>1){
            context.strokeStyle = "#ffffff";
            context.beginPath();
            context.moveTo(vec[0].x,vec[0].y);
            for(var i=1;i<vec.length;i++)
                context.lineTo(vec[i].x,vec[i].y);
            context.stroke();
        }
    }

function Point(_x,_y){this.x = _x;this.y = _y};

this.x;this.y;this.r=r;this.body;
     this.draw = function(context){
        this.x = this.body.GetPosition().x * drawScale;
        this.y = this.body.GetPosition().y * drawScale;
    var my_gradient= context.createRadialGradient(this.x,this.y,this.r/4, this.x,this.y,this.r*2);
     my_gradient.addColorStop(0, "#FAACBD");   
     my_gradient.addColorStop(1, "#772777");         
     context.save(); 
        context.fillStyle = "#ABDFCD";
        context.beginPath();
        context.arc(this.x,this.y,this.r,0,Math.PI/180*360,true);
        context.closePath();
        context.stroke();
        context.fill();
        context.restore();
    };
};

var timeStep = 1/60;
    world.Step(timeStep,10,10);
    world.ClearForces();
    world.DrawDebugData();
    ball.draw(context);
};