Drawing lines on html page

EDIT: Maybe it is little bit late but here is my new implementation. Hope it's more readable.

function createLineElement(x, y, length, angle) {
    var line = document.createElement("div");
    var styles = 'border: 1px solid black; '
               + '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: absolute; '
               + '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);
}

document.body.appendChild(createLine(100, 100, 200, 200));

Explanation (as they say "a picture is worth a thousand words"):

Draw line explanation sketch

you could define:

<div id="line1" class="line vertical"></div>
<div id="line2" class="line horizontal"></div>

.line {
  position: absolute;
  background-color: #000000;
}

.vertical { 
   width: 1px;
   height: 500px;
}

.horizontal {
   width: 500px;
   height: 1px;
}

#line1 {
   top: 20px;
   left: 50%;
}

#line2 {
   top: 260px;
   left: 25%;
}

/* for added rotation effects */
.forty-five {
   transform: rotate(45deg);
}

if you want to get into diagonal lines you could begin to try some rotation with transform: rotate(45deg); The IE Compatible method of rotating objects is discussed thoroughly here, which is terribly complicated. ~~I do not know the IE compatible way to rotate divs, sorry.~~, but that would work in Safari, Firefox, Chrome, and Opera.

[EDITS]

2014/11/08 - sjc - updated transform rules. Added MozDev links and IE rotation SO links.

i found myself needing a solution on this so i developped one using "hr" div and some gradient in border-image. Here is a Jsfiddle link to test it and the code below.

<html lang="fr">
<head>
<script>
    window.addEventListener("load",function(){
        function pow2(n){
            return n*n;
        }   

        var p1 = {
            id:"p1",
            x:150,
            y:50
        };
        var p2 = {
            id:"p2",
            x:300,
            y:250
        };
        var select = null;

        function getAngle(){

            var dist = Math.sqrt(pow2(p1.x-p2.x)+pow2(p1.y-p2.y));
            var l = document.getElementById("line");
            var cos = (p2.x-p1.x)/Math.sqrt(pow2(p2.x-p1.x)+pow2(p2.y-p1.y));
            var behind = p1.x < p2.x;
            var higher = p1.y > p2.y;
            l.style.width = (dist*2)+"px";
            l.style.left = (p1.x-dist)+"px";
            l.style.top = (p1.y)+"px";

            l.style.transform = "rotateZ("+(higher?-1:1)*Math.acos(cos)*(180/Math.PI)+"deg)";
        }

        var down = false

        document.addEventListener("mousemove",function(e){
            if(select){
                select.x = e.pageX;
                select.y = e.pageY;
                console.log(p1);
                var p = document.getElementById(select.id);
                p.style.left = (select.x-5)+"px";
                p.style.top = (select.y-5)+"px";
                getAngle();
            }
        });
        document.addEventListener("mouseup",function(e){
            if(!select)
                select = p1;
            else if(select == p1)
                select = p2;
            else 
                select = null;
        });
        document.addEventListener("mousedown",function(e){
            down = true;
        });
    });
</script>
</head>
<body>
<hr id="line" style="
position: absolute;
top: 50px;
left: -100px;
width: 500px;
margin: 0;
-webkit-transform: rotateZ(53.1deg);
border-width: 1px;      border-style: solid;                          
border-image: linear-gradient(to right, #ffffff 0%,#ffffff 49%,#000000 50%,#000000 100%) 1;
"/>
<div id="p1" style="
border-radius: 5px;
width: 10px;
background: #000;
position: absolute;
height: 10px;
top: 45px;
left: 145px;
"></div>
<div id="p2" style="
border-radius: 5px;
width: 10px;
background: #000;
position: absolute;
height: 10px;
top: 245px;
left: 295px;
"></div>
</body>
</html>

hope it helps someone :)

The <canvas> object is the easiest way (aside from plopping an image or using flash). Also, please post your code and tell us under what browser you're trying to use <canvas>. We can't tell you what you're doing wrong otherwise.

As far as support is concerned, from Wikipedia:

The element is currently supported by the latest versions of Mozilla Firefox, Google Chrome, Safari, and Opera. It is not natively implemented by Internet Explorer (IE) as of version 8[7], though support is in development for Internet Explorer 9; however, many of the Canvas element's features can be supported in IE, for example by using Google or Mozilla plugins, JavaScript libraries and either Adobe Flash or IE's proprietary VML.

SVG is another option, but (surprise!) IE doesn't it support it (IE9 is supposed to support some parts of it).

I'm also not sure what kind of line you want to draw. I mean, you could just make a div and only enable one of its borders - that would be a straight line.

Not all browsers support the <canvas/> element. Try a cross-browser solution, like FlashCanvas or excanvas.

The alternative is using SVG.

Drawing lines on html page

[EDITS]

Related

Recent Posts