www.webdeveloper.com
Results 1 to 4 of 4

Thread: How to draw dashed line with no canvas ?

  1. #1
    Join Date
    Dec 2013
    Posts
    2

    How to draw dashed line with no canvas ?

    The title might sound weird, but is exactly what I want to do. I dont know how though....

    There is a center div (planet earth) and other 4 divs (satelites) wich are floating arround it. What im looking is for a way to draw a dashed line from each planet to earth, and still keep the motion going. Im only using jquery ... and I really got no idea how to achieve this one.


    Code:
    Code:
    $(window).load(function(){
    var pos = $('#center').position(),
        radiusSat = $('#sat0').width() * 0.5,
        radius = $('#center').width() * 0.5,
        cx = pos.left + radius,
        cy = pos.top + radius,
        x, y, angle = 0, angles = [],
        spc = 360 / 4,
        deg2rad = Math.PI / 180,
        i = 0;
    
    for(;i < 4; i++) {
        angles.push(angle);
        angle += spc;
    }
    
    /// space out radius
    radius += (radiusSat + 15);
    
    loop();
    
    function loop() {
    
        for(var i = 0; i < angles.length; i++) {
    
            angle = angles[i];
            
            x = cx + radius * Math.cos(angle * deg2rad);
            y = cy + radius * Math.sin(angle * deg2rad);
    
            $('#sat' + i).css({left:x - radiusSat, top:y - radiusSat});
        
            angles[i] = angles[i] + 1;
            if (angles[i] > 360) angles[i] = 0;
        }
        
        requestAnimationFrame(loop);
    }
    });
    the css

    Code:
      div {
        border-radius:50%;
        border:2px solid #000;
        position:fixed;
    }
    #center {
        width:200px;
        height:200px;
        left:100px;
        top:100px;
        
    }
    #sat0, #sat1, #sat2, #sat3 {
        width:50px;
        height:50px;
        
    }
    And HTML
    Code:
    <div id="centre">
    			<div id="center"></div>
    			<div id="sat0"></div>
    			<div id="sat1"></div>
    			<div id="sat2"></div>
    			<div id="sat3"></div>
    		</div>
    any ideas how to achieve this ?

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,439
    Have you considered SVG?

    Still uses a 'canvas', but it might fit your needs.

    See: http://www.svgjs.com/
    and/or: http://www.w3schools.com/svg/default.asp
    http://srufaculty.sru.edu/david.dailey/svg/

  3. #3
    Join Date
    Dec 2013
    Posts
    2
    Thanks JMRKER , I've never worked with SVG before, but I'll take a look. I guess is a better approach if they can be animated.

    Thanks =)

  4. #4
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,276
    Try, for example, RaphaŽl like on this newClock page...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles