在DOM中绘图的尝试

web_draw.js

function drawline(ax, ay, bx, by) {
     console.log('ax: ' + ax);
     console.log('ay: ' + ay);
     console.log('bx: ' + bx);
     console.log('by: ' + by);


     if (ax > bx) {
         bx = ax + bx;
         ax = bx - ax;
         bx = bx - ax;
         by = ay + by;
         ay = by - ay;
         by = by - ay;
     }


     console.log('ax: ' + ax);
     console.log('ay: ' + ay);
     console.log('bx: ' + bx);
     console.log('by: ' + by);

     var angle = Math.atan((ay - by) / (bx - ax));
     console.log('angle: ' + angle);

     angle = (angle * 180 / Math.PI);
     console.log('angle: ' + angle);
     angle = -angle;
     console.log('angle: ' + angle);

     var length = Math.sqrt((ax - bx) * (ax - bx) + (ay - by) * (ay - by));
     console.log('length: ' + length);

     var style = ""
     style += "left:" + (ax) + "px;"
     style += "top:" + (ay) + "px;"
     style += "width:" + length + "px;"
     style += "height:1px;"
     style += "background-color:black;"
     style += "position:absolute;"
     style += "transform:rotate(" + angle + "deg);"
     style += "-ms-transform:rotate(" + angle + "deg);"
     style += "transform-origin:0% 0%;"
     style += "-moz-transform:rotate(" + angle + "deg);"
     style += "-moz-transform-origin:0% 0%;"
     style += "-webkit-transform:rotate(" + angle + "deg);"
     style += "-webkit-transform-origin:0% 0%;"
     style += "-o-transform:rotate(" + angle + "deg);"
     style += "-o-transform-origin:0% 0%;"
     style += "-webkit-box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, .1);"
     style += "box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, .1);"
     style += "z-index:99;"
     $('#ucast-player').appendChild(document.createElement("<div style='" + style + "'></div>"));
 }









function createLineElement(x, y, length, angle) {
    var line = document.createElement("div");
    var styles = 'border: 1px solid green; '
               + 'width: ' + length + 'px; '
               + 'height: 0px; '
               + '-moz-transform: rotate(' + angle + 'rad); '
               + '-webkit-transform: rotate(' + angle + 'rad); '
               + '-o-transform: rotate(' + angle + 'rad); '  
               + '-ms-transform: rotate(' + angle + 'rad); '  
               + 'position: relative; '
               + 'top: ' + y + 'px; '
               + 'left: ' + x + 'px; ';
    line.setAttribute('style', styles);  
    return line;
}

function createLine(x1, y1, x2, y2) {
    var a = x1 - x2,
        b = y1 - y2,
        c = Math.sqrt(a * a + b * b);

    var sx = (x1 + x2) / 2,
        sy = (y1 + y2) / 2;

    var x = sx - c / 2,
        y = sy;

    var alpha = Math.PI - Math.atan2(-b, a);

    return createLineElement(x, y, c, alpha);
}

$('#ucast-player').appendChild(createLine(0, 0, 100, 200))