js画线

html5中的canvas标签的支持ie9+ 所以考虑兼容性ie下的用vml 下面是简单封装的一个类

用法 qtx_ht("mydiv", "#74DF00", 10).line("shu_1", "shu_9", "shu_2");

mydiv 为容器id

#74DF0 为线的颜色

10 为先的起始位置理要链接的元素的中心点的半径

shu_1-shu_2 为要链接的元素id 这里的参数不限，是按顺序链接

这里要注意的是 ie浏览器下要加

/// 下面是页面的html代码

<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
    <title>第一个范例</title>
    <style>
        v:*
        {
            behavior: url(#default#VML);
        }
    </style>
    <script type="text/javascript" src="qtx.js">
    </script>
</head>
<body>
    <div id="shu_1" name="shu" style="position: absolute; top: 0px; left: 0px">
        1
    </div>
    <div id="shu_2" name="shu" style="position: absolute; top: 20px; left: 100px">
        2
    </div>
    <div id="shu_3" name="shu" style="position: absolute; top: 40px; left: 70px">
        3
    </div>
    <div id="shu_4" name="shu" style="position: absolute; top: 60px; left: 200px">
        4
    </div>
    <div id="shu_5" name="shu" style="position: absolute; top: 80px; left: 60px">
        5
    </div>
    <div id="shu_6" name="shu" style="position: absolute; top: 100px; left: 120px">
        6
    </div>
    <div id="shu_7" name="shu" style="position: absolute; top: 120px; left: 20px">
        7
    </div>
    <div id="shu_8" name="shu" style="position: absolute; top: 140px; left: 60px">
        8
    </div>
    <div id="shu_9" name="shu" style="position: absolute; top: 160px; left: 30px">
        9
    </div>
    <div id="shu_10" name="shu" style="position: absolute; top: 500px; left: 800px">
        10
    </div>
    <div id="mydiv" style="display: block">
    </div>

</body>
</html>
<script type="text/javascript">
    qtx_ht("mydiv", "#74DF00", 10).line("shu_1", "shu_9", "shu_2");

</script>

下面是

qtx.js的代码

///画线 吹预算法 2013-7-4
(function (w) {
    function isIE() {//是IE反回真 否则返回假
        if (! +[1, ]) return true;
        else return false;
    }
    function isExist(strObj) {
        if (typeof (eval("document.all." + strObj)) != "undefined") {
            return true;
        }
        else {
            return false;
        }
    }
    //获取绝对坐标
    function getAbsPoint(e) {
        var x = e.offsetLeft, y = e.offsetTop;
        while (e = e.offsetParent) {
            x += e.offsetLeft;
            y += e.offsetTop;
        }
        var pxy = {};
        pxy.x = x; pxy.y = y;
        return pxy;
    }
    function l(lfrom, lto, r, c, d) {
        var of = document.getElementById(lfrom);
        var ot = document.getElementById(lto);
        //获取对象长宽
        var wf = of.offsetWidth;
        var hf = of.offsetHeight; //是否绝对坐标待议

        var wt = ot.offsetWidth;
        var ht = ot.offsetHeight;

        //获取画线坐标
        var xf = getAbsPoint(of).x + wf / 2;
        var yf = getAbsPoint(of).y + hf / 2;

        var xt = getAbsPoint(ot).x + wt / 2;
        var yt = getAbsPoint(ot).y + ht / 2;
        var _w = Math.abs(xt - xf);
        var _h = Math.abs(yt - yf);
        var hd = Math.atan2(_h, _w)
        var _x = r * Math.cos(hd);
        var _y = r * Math.sin(hd);
        //                var _x = 3;
        //                var _y = 3;
        if (isIE()) {
            //alert("start -- ");
            var s = "<v:line StrokeColor="" + c + "" from="" + (xf < xt ? xf + _x : xf - _x) + "," + (yf < yt ? yf + _y : yf - _y) + "" to="" + (xt < xf ? xt + _x : xt - _x) + "," + (yt < yf ? yt + _y : yt - _y) + """ + " style="position:absolute;left:0;top:0;"></v:line>";
            var _myo = document.createElement(s);

            // 这个方法，使在特定的位置添加对象，具体使用，请参考其它的资料

            d.appendChild(_myo);
        }
        else {
            //创建画布
            var myo = document.createElement("canvas");
            myo.setAttribute("width", Math.abs(xt - xf) + "px");
            myo.setAttribute("height", Math.abs(yt - yf) + "px");
            myo.style.left = xf < xt ? xf : xt;
            myo.style.top = yf < yt ? yf : yt;
            myo.style.position = "absolute";
            //            myo.style.visibility = "visible";
            d.appendChild(myo);
            var cxt = myo.getContext("2d");
            cxt.strokeStyle = c;
            if ((xf - xt) * (yf - yt) > 0) {
                cxt.moveTo(0 + _x, 0 + _y);
                cxt.lineTo(Math.abs(xt - xf) - _x, Math.abs(yt - yf) - _y);
            } else {
                cxt.moveTo(0 + _x, Math.abs(yt - yf) - _y);
                cxt.lineTo(Math.abs(xt - xf) - _x, 0 + _y);
            }
            cxt.stroke();
        }

    }
    var h5 = function (d, c, r) {//参数为容器ID
        return new h5.divline(d, c, r);
    };

    h5.divline = function (d, c, r) {//参数为容器ID
        this.o;
        this.iso = false;
        this.lcolor = "#FF0000"; //默认颜色
        this.lr = 0
        if (d != null) {
            if (isExist(d)) {
                this.o = document.getElementById(d);
                this.iso = true;
                if (c != null) this.lcolor = c;
                if (r != null) this.lr = r; ;
            }
        }
    };
    h5.divline.prototype.line = function () {
        if (this.iso == true) {
            var numargs = arguments.length;
            if (numargs >= 2) {
                for (var i = 0; i < numargs - 1; i++) {
                    l(arguments[i], arguments[i + 1], this.lr, this.lcolor, this.o);
                }

            }
        }
    }
    w.qtx_ht = h5;
})(window);