Html画组织架构图

/**
 * Created with JetBrains PhpStorm.
 * User: kathleen
 * Date: 12-12-16
 * Time: 下午1:10
 * To change this template use File | Settings | File Templates.
 */
function Cire(config,values){
    this.x = config.x ? config.x:0;
    this.y = config.y ? config.y:0;
    this.w = config.w ? config.w :80;
    this.h = config.h ? config.h :40;
    this.c_x = this.x;
    this.c_y = this.y+this.h/2;
    this.name = values.name? values.name:"name";
    this.id = values.id? values.id:"id";
    cxt = document.getElementById("canvas");
    cxt = cxt.getContext("2d");
    this.draw = function(h){
        if(this.l_w){
            cxt.moveTo(this.x,this.y);
            cxt.clearRect(this.x-this.l_w,this.y-this.l_w,this.w+ 2*this.l_w,this.h+ 2*this.l_w);
        }
        if(h){
            this.y = this.y + h;
        }
        this.l_w = cxt.lineWidth;
        cxt.beginPath();
        cxt.moveTo(this.x,this.y);
        cxt.rect(this.x,this.y,this.w,this.h);
        cxt.stroke();
        cxt.fillStyle = "red";
        cxt.font = "normal 20px 宋体";
        cxt.textAlign="center";
        cxt.textBaseline="middle";
        cxt.fillText(this.name, this.x+ this.w/2,this.y+ this.h/2);
        cxt.closePath();
        return this.h;
    }
    this.clear = function(){
    	  	cxt.moveTo(this.x,this.y);
            cxt.clearRect(this.x-this.l_w,this.y-this.l_w,this.w+ 2*this.l_w,this.h+ 2*this.l_w);
    }
    this.isBelong= function(x,y){
        var s_x = this.x;
        var s_y = this.y;
        var e_x = this.x + this.w;
        var e_y  = this.y + th